vue的v-for循环中动态绑定img标签的src

最新推荐文章于 2024-01-18 22:15:03 发布
最新推荐文章于 2024-01-18 22:15:03 发布
阅读量3.1k 收藏 8
点赞数 2
文章标签： vue v-for循环 img动态src :src
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44752430/article/details/103315376
版权

下载中心原先为table列表形式，现需要增加缩略图样式，获取的文件list中，需要对格式进行判断，在img标签中，用:src=“imgSrc(item.type)”，imgSrc为函数，在函数中进行操作返回地址。需要注意的是，用require把地址封装起来。关键代码如下
html部分

<div class="content-item" v-for="item in downloadList">
   <div class="top">
     <img :src="imgSrc(item)" alt="">

js部分

 //背景图片地址处理
    imgSrc(item){
        return require('../assets/icon/'+item.type+'.png');
    },
无数个梦想
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue v-for循环解决img标签的src动态绑定问题
ColourfulTiger的博客
06-13 3万+
在解决这个问题上，遇到了很多错误的方案，一直没有跑通，有些是图片标记出现了，但是图片内容没有出现，这就很让人头疼了，下面，我讲解我操作成功的案例吧。1、目录结构如下图片放置在与src同级的static文件夹下，在这里，我放置在slider中2、数据配置如下： 注意引入的路径，直接从static文件中对应的地方引入。data () {    return {        product:[    ...
解决vue的 v-for 循环中图片加载路径问题
10-18
在Vue中，我们可以动态绑定`img`标签的`src`属性到一个变量上，如下： ```html <img :src="item.EnName + '.jpg'" alt="flowers"> ``` 这里的`item.EnName`代表了图片的英文名称，假设图片文件名与英文名称相同，...
Vue v-for循环解决img标签的src动态绑定问题?
写写平时的技术与感想
08-25 1万+
return { product:[ { "src":'../../static/slider/logo1.jpg', "deceration":"产品1", "price":100, "id":1 }, { "src":"../../static/slider/logo.png", "deceration...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
今天小编就为大家分享一篇关于vue v-for循环解决img标签的src动态绑定问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue v-for循环解决img标签的src动态绑定问题
shykevin的博客
03-29 5683
一、概述 示例代码： <template> <div> <div v-for="(item,index) in product"> <img src="{{ item.imgSrc }}" alt=""> </div> </div> </template> 发现这样运行会报...
vue在循环中动态设置img的src属性
ctchengzi的博客
09-12 1543
vue在循环中动态设置img的src属性
Vue | 动态绑定img的src属性
最新发布
Tuan_Better的博客
01-18 1394
方法：字符串URL前加上require。
v-for动态设置img的src
qq_30136729的博客
09-26 2030
项目开发中遇到这个问题，记录总结一下。 问题：利用v-for动态设置图片,图片路径处写法如下图，发现图片不显示 <div v-for="(item,index) in classify" :key="index" class="cart"> <img :src="item.img" alt=""> <div> <p>{{item.title}}</p> <p&
Vue用v-for给循环标签自身属性添加属性值的方法
10-17
总结来说，Vue.js中使用`v-for`给循环标签添加属性值时，需要理解如何正确地动态绑定属性（使用`:`或`v-bind`），以及在处理图片路径时如何确保Webpack能识别和处理这些路径。通过`require()`、`import`或使用`...
【Vue】在vue-cli中绑定图片src属性
AC_greener的博客
08-12 1101
git推送项目到github的方法 在推送之前要配置一下git的用户名和邮箱（和github的邮箱一致） git config user.name “XXX” git config user.email “XXX@XXX.com” 在本地新建一个文件夹，进入文件夹，在命令行执行: git init 执行 git remote add origin https://github....
vue3：data 如何动态绑定图片src
一句话介绍不了
11-20 1643
1、给img src绑定一个变量： <img :src="imgPath" /> 2、 require路径： <script> export default { data() { return { imaPath: require('.././xxx/xxx/xxx.png'), }; }, }; </script> //记录成长，仅此，仅此而已。 ...
【技术分享】Vue中使用v-for给img中的src属性赋值
你来啦????
07-22 1196
【技术分享】Vue中使用v-for给img中的src属性赋值
vue v-for 遍历动态给图片img标签 src拼接路径问题
qq_32864189的博客
04-29 4975
刚接触vue,v-for中获取字段都很正常，但是<img src="">中的路径不知道怎么拼接。还是我张哥出马，一个赶俩。废话少说直接上代码。 在vm实例中的data加上url:window.fileUrl,获取路径，然后在<img :src="url+item.peoplePic">拼接。 vue <div class="people_up block_hov...
vue中 v-for如何在images标签中设置路径
qq_44954984的博客
05-04 597
在vue中使用v-for动态设置img的src值，路径对，但是不显示图片 在vue中动态的获取img的src值，正确的形式为<img :src="item.img"> ，要使用v-blind绑定
vue中使用v-for循环动态加载图片(:src)失败的解决方法
ThisEqualThis的博客
11-24 7095
在vue中使用v-for循环动态加载图片，如果img的src为url链接地址时，图片可以显示出来；但是一旦换成本地静态图片资源，加载就出现了问题，图片碎裂，无法加载。 使用url链接时，图片正常动态加载： <template> <van-swipe class="goods-swipe" :autoplay="3000"> <van-swipe-item v-f...
vue3 动态(:src)绑定img图片
weixin_50480451的博客
11-16 6320
vue3 动态(:src)绑定img图片
Vue中src属性绑定的问题
热门推荐
林飞的梦呓
04-25 2万+
一、Vue中src属性绑定的问题 图片src属性未绑定的时候，相对路径为&quot;../assets/product.png&quot;，可以看到图片会在浏览器中渲染出来， 当以src属性绑定的时候 :src=&quot;{{ item.pro_img }}&quot;，浏览器报错。 productList: [ { ... // 'pro_img': '.....
vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使
一家外包公司的码农，专职前端开发
01-20 8541
相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。 第一种：使用require引入本地图片路径。 第二种：使用远程服务器图片路径。 第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。 第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据 绑定index --&
vue图片的动态绑定
shiyibushiwei的博客
08-17 3766
vue图片的动态绑定，就是想办法给路径前边加一个require()

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值