vue中img动态绑定src(网络图片https,http)

已于 2024-11-05 16:30:05 修改
阅读量6.4k 收藏 4
点赞数
文章标签： vue.js javascript 前端
于 2023-04-28 10:45:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43608950/article/details/130421680
版权
文章展示了如何在Vue项目中通过在index.html设置referrer策略，然后在组件中使用v-for循环动态绑定img标签的src属性，显示网络图片。图片源来自Gitee，并提供了包含多张图片的数据示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue访问网络图片

在index.html页面<head>标签中添加

<meta name="referrer" content="no-referrer">

vue中img动态绑定src(网络图片https)

vue绑定img图片资源

<el-row :gutter="20">
  <el-col :span="6"  v-for="item in imgList" :key="item.imgNo">
    <div class="grid-content bg-purple">
      <img :key="item.imgNo" draggable="false" :src="(`${item.src}`)" >
    </div>
  </el-col>
</el-row>

src地址

imgList:[
  {
    imgNo:1,
    src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
    width:40,
    height:40
  },
  {
    imgNo:2,
    src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
    width:40,
    height:40
  },
  {
    imgNo:3,
    src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
    width:40,
    height:40
  },
  {
    imgNo:4,
    src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
    width:40,
    height:40
  },
  {
    imgNo:5,
    src:'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png',
    width:40,
    height:40
  }
],

效果

更多 

不阿
关注
【Vue】img使用 :src 动态绑定图片地址，但是加载图片不成功
weixin_57509111的博客
05-20 1659
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。引入才能成功，就可以动态使用了。设置绝对路径或者相对路径是改为用。动态地址，路径被加载器解析为。
vue动态设置img的src路径实例
10-18
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue | 动态绑定img的src属性
Tuan_Better的博客
01-18 1743
方法：字符串URL前加上require。
vue3中的img标签使用动态链接无法显示
最新发布
anyi888888的博客
04-22 459
vue3中img标签使用动态链接不显示问题
vue2.0中动态绑定img的src属性的方法（三元运算）
simpleMan8023的博客
07-08 2292
函数在构建时会解析图片路径，并将图片打包到正确的位置。使用 require 可以确保路径在打包时正确解析。可以用于在运行时加载资源，但这种方法通常用于更复杂的场景，如按需加载模块。在标签里进行三元运算符判断的时候，引用地址外层需要加require()使用computed属性来动态计算img的src路径。/* 你的样式 */
VueJS动态设置img的src
缘如风的博客
11-10 949
VueJS动态设置img的src
vue动态设置图片img地址属性src
面向未来的历史
04-15 1882
此处， 一定要写为： ${name}。此处如果图片地址为静态的（写死了地址），编译后，代码中的图片地址为静态的，编译后的图片地址带有hash， 导致找不到图片，前端就无法显示图片。页面有多张图片，动态的设置图片的链接src， 即： :src。
Vue中img的src属性绑定与static文件夹实例
08-30
Vue 中 img 的 src 属性绑定是指在 Vue 组件中绑定图片的 src 属性，以便正确地加载图片。但是在实际开发中，开发者可能会遇到图片加载失败的问题。本文将介绍 Vue 中 img 的 src 属性绑定与 static 文件夹实例的...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
综上所述，通过这篇文章，我们可以了解到在Vue项目中使用v-for循环渲染图片列表时，需要注意图片资源的存放位置、正确的路径引用方式，以及Vue中动态绑定src属性的正确语法。这些知识点对于开发一个性能良好且维护性...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
<img :src="imageUrl" alt="动态图片"> ``` 这里的`imageUrl`是我们将在Vue实例的`data`选项中定义的属性。 接下来，我们需要在Vue实例的`data`函数中声明这个`imageUrl`，并提供初始值。通常，如果图片路径不是从...
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue中如何动态配置img标签的src
W78955的博客
04-18 2056
vue中如何动态配置img标签的src
vue中动态设置img的src属性
热门推荐
angularYang的博客
07-12 2万+
我们知道在使用img标签时，直接在img标签中通过src属性设置图片的路径，即可表示对图片的引用。 <img src="../assets/drag_1.jpg"> 如上表示的是 引用的是assets文件下的1.jpg图片。这个对于所有的前端开发者来说，都是没有什么问题的。今天在开发vue项目中需要给img动态的设置src属性，这时通过js代码设置的src属性一直没有生效，导致图片显示不了。 比如现在有10张照片，需要根据业务的不同场景，对显示的图片进行变换。如果我们在每次进行图片的更改
vue中动态修改img标签中src的方法
黄钢的博客
07-04 8549
首先看vue中img标签的常规写法当src需要动态修改时，有点麻烦，经常忘记，记录一下。
Vue处理img动态src
xiangxiongfly
06-25 1602
Vue处理img动态src
VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值(1)
2401_84437095的博客
05-16 1386
我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vue img使用动态src（ :src ）
逆风优雅的博客
04-24 1万+
在vue项目中使用，动态的src，需要注意的是： 在引用的文件目录的前面加上require 否则引入的图片是不生效的 如： <img :src="require('../../../assets/images/company_indicator/company-tab-three0' + (index + 1) + '.png')" /> 三元表达式的用法： <img :src="100 >=0? require('../../ass...
vue3: img标签src属性动态设置资源路径
XL_0502的博客
08-16 6953
vite中默认支持ESM方式加载模块，没有require相关方法。补充两个方法。方法 require()Node.JS 原生方法 ，以CommonJS方式加载模块/文件/图片；Webpack 默认支持 ，Vite不支持；方法 require.context()Webpack 特定方法，此方法可实现自定义上下文；Vite不支持；
Vue 动态绑定 img src中的数据
qwq2867309085qwq的博客
10-17 996
Vue 动态绑定 img src中的数据
vue中的img动态绑定src
09-13
在Vue中，可以使用v-bind指令或简写的冒号(:)来动态绑定img标签的src属性。根据你提供的代码和需求，请参考以下步骤来实现动态绑定src属性： 1. 在Vue实例的data属性中定义一个存储图片地址的数组imgList，其中包含多个对象，每个对象代表一张图片，其中包含imgNo、src、width和height属性。 2. 在Vue模板中，使用v-for指令遍历imgList数组，为每个元素创建一个img标签，并使用:item指令将当前元素绑定到item变量上。 3. 在img标签中，使用v-bind指令或简写的冒号(:)将item.src绑定到src属性上，这样每个img标签的src属性都会根据对应的item对象的src属性动态更新。 4. 若要使用网络图片，需要在index.html页面的<head>标签中添加<meta name="referrer" content="no-referrer">，以防止浏览器发送Referer头信息。这样可以绕过一些图片防盗链的限制。 下面是一个示例代码： ```vue <template> <el-row :gutter="20"> <el-col :span="6" v-for="item in imgList" :key="item.imgNo"> <div class="grid-content bg-purple"> <img :key="item.imgNo" draggable="false" :src="item.src"> </div> </el-col> </el-row> </template> <script> export default { data() { return { imgList: [ { imgNo: 1, src: 'https://gitee.com/guo-xiaoya/images/raw/master/img/202304260905239.png', width: 40, height: 40 }, // 其他图片对象 ] }; } }; </script> ``` 通过以上步骤，你可以在Vue中实现动态绑定img标签的src属性，以显示不同的图片。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值