vue中的Src绑定不显示图像

zdwk9cvp 于 2023-06-30 发布在 Vue.js

关注(0)|答案(3)|浏览(118)

我已经在我的模板中创建了一个有三个对象的数组和一个循环。它在获取其他数据和src数据方面工作正常，但没有显示我的图像。有人知道我该怎么做吗？
sandbox link to my project
这是我的模板代码

<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" },
  ],

vue.js

来源：https://stackoverflow.com/questions/72024014/src-binding-in-vue-is-not-showing-images

3条答案

按热度按时间

slmsl1lt1#

**方案一：**如果您不想使用assets目录下的Webpack资源，可以将图片添加到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

赞(0）回复(0）举报 2023-06-30

4urapxun2#

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

它是这样工作的

赞(0）回复(0）举报 2023-06-30

lztngnrs3#

另一个可能的原因是在项目中没有正确配置@别名。您可以尝试将@替换为src目录的实际路径，例如：

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

赞(0）回复(0）举报 2023-06-30

我来回答

vue中的Src绑定不显示图像

3条答案

相关问题

热门标签

最新问答