vue中通过v-for获取img src的问题

本文讲述了在项目中遇到的图片加载失败的问题,起初因为写法错误导致图片无法显示,通过网络查询得知src属性的正确用法应为使用require方法引入图片路径。

一开始我写法错误,想当然的认为应该是这样写:

{
     id:'1',
     src:'../assets/123.jpg')
 }

但这样写我发现图片死活加载不出来,但是在网页调试中又看到路径是正确的,很疑惑。
然后我就上网查原因,发现是src写法不正确,应该是下面这样写:

{
     id:'1',
     src:require("../assets/123.jpg")
 }
### Vue3 中使用 `v-for` 循环渲染本地图片的 `img` 标签 在 Vue3 中,如果要通过 `v-for` 渲染本地图片到 `<img>` 标签中,则需要注意如何正确引入和引用这些静态资源文件。通常情况下,本地图片会被放置在项目的 `public` 或者 `src/assets` 文件夹下。 以下是具体实现方法: ```vue <template> <div> <!-- 使用 v-for 遍历 localImages 数组 --> <img v-for="(imagePath, index) in localImages" :key="index" :src="require(`@/assets/images/${imagePath}`)" :alt="'Local Image ' + (index + 1)" class="local-image" /> </div> </template> <script> export default { data() { return { // 定义一个包含本地图片名称的字符串数组 localImages: ['image1.png', 'image2.png', 'image3.png'] }; } }; </script> <style scoped> .local-image { width: 150px; height: auto; margin: 5px; } </style> ``` #### 解析 - **数据结构定义**:在组件的 `data()` 函数中定义了一个名为 `localImages` 的数组[^4],它存储的是本地图片文件名(不带路径前缀)。假设所有的图片都存放在项目根目录下的 `src/assets/images/` 文件夹里。 - **动态导入图片路径**:由于 Webpack 不会自动解析相对路径作为变量传入的情况,因此这里采用了 `require` 方法来动态获取图片的实际路径[^5]。注意这里的 `${imagePath}` 应当匹配实际存在的文件名。 - **模板语法**:同之前一样,我们依然借助 `v-for` 指令完成列表项的循环展示,并且为每个 `<img>` 设置了必要的属性如 `:src`, `:alt` 等[^6]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值