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

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 : '少し恥ずかしがり屋の女の子 好きなことは買い物、カフェ巡り'

  }
]

但是，这对您的页面是如何被服务的做出了一些假设。