Question

我尝试在v-for循环中绑定图像源。但是显示了五个损坏的图像。

App.vue

<template>
  <div id="app">
    <ProfileHeader></ProfileHeader>
    <ProfileContent :items="imgItems"/>
    <ProfileDetail></ProfileDetail>
  </div>
</template>

<script>
import ProfileContent from './components/ProfileContent.vue'

export default {
  components: {,
    'ProfileContent': ProfileContent
  },
  data () {
    return {
      imgItems: [
        {
          thumbnail: './assets/imgs/aa.PNG',
          description: '1'
        },
        {
          thumbnail: './assets/imgs/bb.PNG',
          description: '2'
        },
        {
          thumbnail: './assets/imgs/cc.PNG',
          description: '3'
        },
        {
          thumbnail: './assets/imgs/dd.PNG',
          description: '4'
        },
        {
          thumbnail: './assets/imgs/ee.PNG',
          description: '5'
        }
      ]
    }
  }
}
</script>

ProfileContent.vue

<template>
  <div class="container">
    <div class="gallery">
      <ul>
        <li v-for="(item, index) in items" :key="index">
          <img :src="item.thumbnail" class="gallery-image">
          {{ item.thumbnail }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    items: { type: Array, default: () => [] }
  }
}
</script>

结果看起来像这样。 enter image description here

希望您能帮助我。谢谢！XD

Answer 1

您在Vue中所做的是正确的。问题出在您的图片路径上：要使用相对路径，请离开./并只写assets/imgs/aa.PNG。（考虑到<host>/assets是可访问的公用文件夹；例如https://www.example.com/assets）

如果您尝试将图像包含在webpack导入的捆绑软件中，则必须使用webpacks require功能。不幸的是，webpack无法识别规则的相对路径。看起来像这样：

 imgItems: [
   {
     thumbnail: require('./assets/imgs/as.png'),
     description: '1',
   },
   ...
 ]

vue img v-for绑定

1 个答案: