vue中使用for循环生成img但是src 无效的问题 解决 require

最新推荐文章于 2023-05-17 13:38:05 发布
最新推荐文章于 2023-05-17 13:38:05 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： vue项目搭建 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/preserveXing/article/details/121657543
版权
在Vue中遇到使用for循环动态设置img的src时，若直接使用相对路径，图片无法显示。原因在于require关键字的缺失。通过在img标签的src属性中加入require包裹静态资源路径，例如require('./src/img/1.jpg')，可以确保图片正确显示。
摘要由CSDN通过智能技术生成

1. 使用情况一:直接把src的值写在img中

代码样式

<ul>
    <li >
        <img :src="./src/img/1.jpg" alt="">
        //按照你图片存放的路径
    </li>
</ul>

这样写完全没有问题 他会找到图片并进行显示

2. 使用情况二:把vu

最低0.47元/天 解锁文章
门前大桥下.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue动态设置img的src不生效的问题
Celester_best的博客
06-21 4780
在vue项目中动态设置img的src时，图片会加载失败。我们可以先看个例子。 由结果可以看出图片加载失败。查看elements之后会发现，src被当做静态资源处理了，并没有进行编译。 为了解决动态的src没有进行编译的问题，我们可以使用require引入图片。 可以看到使用require引入图片之后，图片就可以正常加载出来了。require是在运行时加载，而import是编译时加载；如果希望使用import引入图片就需要提前导入图片。 另外require和import另外的区别：requir
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【VUE】Vue2.x中v-for赋值img src失败解决办法！
野生Java小菜鸟的博客
11-27 807
初次接触Vue，在学习的过程中有点懵逼，于是乎出了各种错误！ 下面开始记录这次出坑过程。 resource是后台ajax请求得到的对象。 在使用v-for遍历Vue data时，利用src="{{resource.video_cover}}"的方式获取报错。 <div class="row" v-for="(resource,index) in resources"> <div class="col-xs-4 col-lg-2"> <div class="th
vue中使用v-for循环动态加载图片(:src)失败的解决方法
ThisEqualThis的博客
11-24 7164
在vue中使用v-for循环动态加载图片，如果img的src为url链接地址时，图片可以显示出来；但是一旦换成本地静态图片资源，加载就出现了问题，图片碎裂，无法加载。 使用url链接时，图片正常动态加载： <template> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-f...
vue v-for循环解决img标签的src动态绑定问题
shykevin的博客
03-29 5760
一、概述 示例代码： <template> <div> <div v-for="(item,index) in product"> <img src="{{ item.imgSrc }}" alt=""> </div> </div> </template> 发现这样运行会报...
vue3循环遍历图片渲染无效果
limif的博客
10-18 2072
路径写成"'../../assets/situation/'+item.img+'.png'"会没有效果。循环遍历展示图片：（注释部分也是可以渲染出来）绑定的图片路径必须写成src开头，也就是根目录,
解决vue的 v-for 循环中图片加载路径问题
12-08
当时我想，vue 中的img 的src 可以动态绑定到一个变量上， 很简单吗，就没有考虑太多，直接开始做了。 首先和后台商量一下数据结构，因为图片要和名称一一对应，所以后台要返回中英文的名称的映射，我把前台的图片...
解决vuecli3中img src 的引入问题
10-15
总结来说，解决Vue CLI 3中`img src`的引入问题，你需要根据图片的使用场景选择合适的引用方式。对于静态资源，可以考虑`static`目录；对于需要webpack处理的资源，放在`assets`并使用`require`；对于动态加载或与...
vue中动态设置for循环里img的src值
changyana的博客
04-17 2064
试了20分钟，终于搞出来了，记录一下。 我的for循环如图 想要根据每个index显示不同的图片（注意index是默认从0开始，所以你图片的编号也需要从0开始，如果图片编号从1开始的话，第一栏将没有图片展示） 则在img里的语句如下 <image class="img" :src="'../../static/article/article'+index+'.jpg'"></image> 展现结果如下：大功告成！ ...
【vue】v-for循环图片加载不出来，直接在src上面写图片链接就可以加载出来，或者使用require(图片链接)可以加载出来
腾讯云云开发布道师，慕课网合作讲师
02-22 3619
1、具体情况 将图片放在src/assets/img文件夹下面，循环图片的话，图片显示不出来 就像下面这样，图片是显示不出来的 <template> <div v-for="img_url of images"> <img :src="img_url"> </div> </template> <script>...
Vue给img标签动态绑定src不展示的问题
你好，欢迎光临！
04-09 690
解决方案 data中的数据加上require()即可 <img v-for="(item, index) in emojiComp" :src="item" class="emoji"/> // data emojiComp: [ require('@/assets/statusIcon/cry.png'), require('@/assets/statusIcon/frown.png'), require('@/assets/statusIcon/meh.png'), require('
Vue for循环数据展示 获取img的src
weixin_45844542的博客
05-14 1977
循环数据展示图片 <div style="width: 50%;height: 145px;text-align: center;" class="img" v-for="item in imgArr" :key="item.ID"> <img @click="sonimg($store.state.imgSrc + item.CNPICTURGUID)" style="width:100%;height:80%;" :src="$sto
vue动态img属性不生效
最新发布
qq_47657875的博客
05-17 322
【代码】vue动态img属性。
vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使
一家外包公司的码农，专职前端开发
01-20 8669
相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。 第一种：使用require引入本地图片路径。 第二种：使用远程服务器图片路径。 第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。 第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据 绑定index --&
vue：img标签中src动态字符串无效
Space_CN的博客
11-08 1503
1.问题： 在使用img标签读取图片时，如果使用绝对路径字符串则可以成功读取图片，但是如果使用动态拼接的变量字符串则不能获取到想要读取到的图片 <el-image :src="url"></el-image> this.url = require('C:\\Users\\Spacer\\Desktop\\images\\1.jpg') this.url = 'C:\\Users\\Spacer\\Desktop\\images\\' + img 浏览器console报错：
vue坑： audio、img、video等动态绑定src无效
Yss915的博客
11-09 792
解决办法：在src地址前加上require 例如: <template> <div> <audio id="audio" :src="path" ref="aud" controls> </audio> </div> </template> <script> export default { name:'audio', data() { return { pa
vue img 绑定 src 无效(unknown) 的解决方案
qq_18804311的博客
04-06 3846
vue img 绑定 src 无效(unknown) 的解决方案 这几天在使用vue写一个登录界面，需要将后台传给的图片验证码渲染到页面上，但使用v-bind一直不可以，具体代码如下： <img :src=“imgCode” style=“margin-right:30px;width:100px” @click=“getSmsCode”/> 但这样从element里面看到的img 标签中的src始终等于unknown，界面上也没渲染出任何图片； 于是便在网上debug，首先很感谢 https
JS修改html文件中元素src属性失效的问题（已解决）
HeeRing的博客
12-30 733
一、JS，ajax请求地址后加随机参数，比如XXXX?二、在url后面加一个随机数 url=test.jsp?浏览器为了提高用户访问同一页面的速度，会对页面数据进行缓存。当url请求地址不变时，加上随机数，就是欺骗浏览器url改变了，会每次都向服务器发送请求而不去读缓存。有时候会导致浏览器不发送请求，直接从缓存中读取之前的数据。试了好多种最后终于找到了可以运行的方法，具体方法代码如下。如果数据改变了，而没加随机数，读取的数据会跟之前一样。
关于vue中img标签的src属性动态绑定本地图片路径无效的问题
weixin_46545863的博客
06-28 2620
关于vue中img标签的src属性动态绑定本地图片路径无效的问题
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值