vue 中的 src 绑定不显示图像

Question

我在我的模板中创建了一个包含三个对象的数组和一个循环。它可以很好地获取其他数据和 src 数据，但它没有显示我的图像。有人我该怎么办吗？

这是我的模板代码

<div
  class="box m-3"
  @click="selectBox(item.id)"
  v-for="item in boxData"
  :key="item.id"
  :class="{
    'border-select': selected(item.id),
  }"
>
  <p>{{ item.name }}</p>
  <img :src="item.src" width="60" alt="" />
  src: {{item.src}}
</div>

我的数据

boxData: [
    { id: 1, name: "object 1", src: "@/assets/power(1).png" },
    { id: 2, name: "object 2", src: "@/assets/power(1).png" },
    { id: 3, name: "object 3", src: "@/assets/power(1).png" },
  ],

Answer 1

<img :src="require(`@/assets/${item.src}`)" width="60" alt="" /> src: {{ item.src }}

它是这样工作的

Answer 2

解决方案一： 如果你不想使用 assets 目录下的 Webpack assets，你可以将图片添加到 static 目录。

在您的代码中，您可以相对于根目录 (/) 引用这些文件：

<!-- Static image from static directory -->
<img src="/my-image.png" />

<!-- webpacked image from assets directory -->
<img src="~/assets/my-image-2.png" />

Nuxt 不会更改此路径，因此如果您自定义 router.base，则需要确保手动将其添加到您的路径中。例如：

<img :src="`${yourPrefix}/my-image.png`" />

解决方案 2： 在处理动态图像时，您需要使用 require

 <img :src="require(`~/assets/img/${image}.jpg`)" />

Image not displaying in loop Vue.js

vue 中的 src 绑定不显示图像

Src binding in vue is not showing images

vue.js

nuxt.js