vue 中img标签的src地址放在data中不生效

已于 2023-01-11 14:30:39 修改
阅读量793 收藏 1
点赞数
文章标签： vue.js 前端 Powered by 金山文档
于 2023-01-05 15:56:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43773218/article/details/128564827
版权

把img标签的src地址放在data中，再赋值给src的话是不生效的

解决办法

方法一、将图片资源文件放在项目目录的static文件下，这样即可生效

方法二、通过import的方法将图片源路径引入

在data中：

渲染：

此时img标签便可以通过遍历的方式，再data中的imgList中找到图片路径

可狗可乐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
data:image/png;base64是什么
weixin_30645617的博客
06-01 5296
大家可能注意到了，网页上有些图片的src或css背景图片的url后面跟了一大串字符，比如：data:image/png;base64,　iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/　KEAUFF...
html5 data src显示,img 的data-src 属性及懒加载
weixin_42513365的博客
06-10 2763
一、什么是图片懒加载当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出现在可...
html data-src和src的区别,img 的data-src 属性实现懒加载
weixin_42581003的博客
06-21 8110
一、什么是图片懒加载？当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次)，当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。通俗一点：1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出现...
图片base64编码显示
suflow
05-17 434
 我们正常情况下，在html中会使用 img标签显示图片， 如：<img src="http://XXX.com/yyy.png"    其实也可以使用图片的base64编码格式达到同样的效果, 如: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQ...
vue中data中定义图片相对路径页面不显示问题
彳亍的博客
11-18 2828
vue在data中定义图片相对路径： data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用va...
关于img标签中data:image/XXX；base64图片内容提取
热门推荐
Kinan_的博客
09-17 1万+
data类型URL图片类型 data:,<文本数据> data:text/plain,<文本数据> data:text/html,<HTML代码> data:text/html;base64,<base64编码的HTML代码> data:text/css,<CSS代码> data:text/css;base64,<base64编码的CSS代码> data:text/javascript,<Javascript代码.
Vue中img的src是动态渲染时不显示的解决
01-19
今天在项目中遇到一个需求，设计稿如下 就是展示用户头像，数据从后端获取...以上这篇Vue中img的src是动态渲染时不显示的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue中img的src属性绑定与static文件夹实例
08-30
Vue中img的src属性绑定与static文件夹实例 Vue 中 img 的 src 属性绑定是指在 Vue 组件中绑定图片的 src 属性，以便正确地加载图片。但是在实际开发中，开发者可能会遇到图片加载失败的问题。本文将介绍 Vue 中 img...
解决vuecli3中img src 的引入问题
10-15
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue动态设置img的src不生效的问题
qq_46258819的博客
09-22 6310
在VUE项目中有时会遇到需要动态修改Img的src的情况，如果直接修改会使得图片无法显示出来。这是由于src被当做静态资源处理了，并没有进行编译。
vue img src="" 的路径在data中不生效 实际上需要这样写
weixin_39897287的博客
08-28 2167
< img src="../assets/images/banner2.png"> 可以生效 放在data里面不生效，比如这样写 // banner图 bannerList:[{ image:"./assets/images/banner1.png" },{ image:"../assets/images/banner2.png" },] 实际上需...
在vue2的data里面引用本地图片
最新发布
weixin_52326756的博客
03-01 689
在vue2的data里面引用本地图片
小程序动态改变 image src 失效
pspxuan的博客
10-30 2813
需求: 上传图片到服务器后改变 image src ,将图片显示出来, 问题: 重复提交时,返回的图片路径都是一模一样的,这时服务器上的图片已经改变,但是不会更新视图中的图片. 解决: 在图片路径最后添加参数, 为随机数,这时视图就会响应更新, 如下 'http//:×××××.png?a=×××××' // 每一次参数都不一样 ...
解决在vue中img标签动态绑定src不生效的问题
HHYZBC的博客
11-27 2044
将标签的数据加上require()即可。
解决img 动态获取图片路径不生效
mxh_CSDN的博客
06-17 2711
img 动态获取src图片路径不生效问题
Vue-在data中引入静态图片路径
每一次跌倒都是为了华丽的站起来。
09-01 6730
Vue-在data中引入静态图片路径
html img 使用data格式加载图片
weixin_30508309的博客
09-05 1613
背景 这久闲来无事给一位客户测试一款体检软件，是winform结构的，其中有一个功能是需要把生成的体检报告导出为html格式。测试导出后直接在谷歌浏览器里查看，体检详细内容、医生签名、条形码都能正常显示。关闭浏览器准备进行下一项测试，这时发现导出的就一个html文件，桌面上扫了好几遍也没看到医生签名和条形码这两个图片文件。心想这怎么能难倒我，也是重新在浏览器里打开，按下F12...
vue src动态赋值本地图片遍历不显示问题解决办法
weixin_46027556的博客
10-13 760
图片放在src同级的static文件夹下。
vue3中 vue-lazyload的@loaded不生效
04-01
可能是因为您没有正确设置@loaded回调函数。在Vue3中，您需要使用v-on来设置回调函数，而不是使用@loaded。以下是一个示例代码： ``` <template> <img v-lazy="imageSrc" v-on:loaded="onImageLoaded" /> </template> <script> import { defineComponent } from 'vue'; import VueLazyload from 'vue3-lazyload'; export default defineComponent({ components: { VueLazyload }, data() { return { imageSrc: 'your-image-source', }; }, methods: { onImageLoaded() { console.log('Image loaded!'); }, }, }); </script> ``` 请注意，我们使用v-on:loaded来设置回调函数onImageLoaded。您可以在回调函数中执行任何操作，例如显示一个加载完成的消息或执行其他操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值