我已经在我的模板中创建了一个有三个对象的数组和一个循环。它在获取其他数据和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" },
],
3条答案
按热度按时间slmsl1lt1#
**方案一:**如果您不想使用assets目录下的Webpack资源,可以将图片添加到static目录下。
在代码中,可以相对于根目录(/)引用这些文件:
Nuxt不会更改此路径,因此如果您自定义router.base,则需要确保手动将其添加到路径中。例如:
**解决方案2:**处理动态图像时,需要使用require
Image not displaying in loop Vue.js
4urapxun2#
它是这样工作的
lztngnrs3#
另一个可能的原因是在项目中没有正确配置@别名。您可以尝试将@替换为src目录的实际路径,例如: