vuejs无法显示资产文件夹中的图像

Question

我尝试从资产中上传图片，但是没有任何显示。我希望图像源与character.headImage中设置的值匹配。

data / character.js

export const character = [
  {
    name : 'Super Lady',
    fullImage : '../assets/characters/superLadyFull.png',
    headImage : '../assets/characters/superLadyHead.png',
    description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'

  }
]

charactersSelection.vue

<template>
<div>
    select the characther
    <div v-for="character in characters">
        <img :src="character.headImage">
        <p>{{character.description}}</p>
    </div>
  </div>
</template>

<script>
  import {character} from "../data/Character";

  export default {
    name: "CharactersSelection",
    data() {
        return {
            characters : character
        }
    }
  } 
</script>

<style scoped>

</style>

Answer 1

最终，您希望图像看起来像这样

<img src="assets/characters/superLadyHead.png">

更改字符图像源字符串以反映以下内容

export const character = [
  {
    name : 'Super Lady',
    fullImage : 'assets/characters/superLadyFull.png',
    headImage : 'assets/characters/superLadyHead.png',
    description : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'

  }
]

但是，这对您网页的投放方式做出了一些假设。