vue img v-for 绑定

Question

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

这是我的目录的样子 enter image description here

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 是一个可访问的 public 文件夹；例如 https://www.example.com/assets）

如果您尝试将图像包含在带有 webpack 导入的包中，则必须使用 webpacks require 函数。不幸的是，webpack 无法识别常规的相对路径。它看起来像这样：

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

vue img v-for 绑定

vue img v-for bind

image

vue.js

v-for