使用图像道具 - vue答案

【问题标题】：Using image props - vue使用图像道具 - vue
【发布时间】：2021-04-01 11:59:46
【问题描述】：

我正在尝试通过 v-for 显示图像，但它们没有出现。

<div v-for="(n, i) in images" :key="i">
    <v-img :src="{n}"></v-img>
</div>

...

images: [
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/luiz.png',
]

【问题讨论】：

对于:key，你真的不应该使用i，这会比什么都不使用更糟糕。
@kissu 你从哪里读到的？这是完全不真实的。只要i是字符串，其实还是建议用它作为key。
@Terry 基于它的基本工作原理，但这是证实我的说法的好来源：stackoverflow.com/a/44531545/8816585
请分享您的文件夹结构（组件与图像相关的位置）
请显示完整的组件代码

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

您不需要使用{} 只需从 :src 绑定中删除这些括号

<div v-for="(n, i) in images" :key="i">
    <v-img :src="n"></v-img>
</div>

...

images: [
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/Olivia.png',
     '../assets/thirdSection/luiz.png',
]

【讨论】：

伙计，还是不行。我对其进行了测试以查看图像路径是否正确，是的，是的。但它仍然没有出现
@VitorLucenti 你的路径正确吗？在尝试循环数组之前尝试显示一个（只需获取第一个索引）。 <v-img :src="images[0]"></v-img>
你可能需要使用~/assets
还没有，伙计们:(图片路径是对的
vuetify 是否正确安装？使用常规的<img> 标签进行检查。

【解决方案2】：

尝试使用require 加载本地图片：

<div v-for="(n, i) in images" :key="i">
    <v-img :src="require(n)"></v-img>
</div>

...

images: [
     '@/assets/thirdSection/Olivia.png',
     '@/assets/thirdSection/Olivia.png',
     '@/assets/thirdSection/luiz.png',
]

您只需将 file-loader 安装到您的模块并配置您的 webpack。

这样做，你的本地图像路径被解析为一个 url。

【讨论】：