vue项目src动态引入图片资源

最新推荐文章于 2024-02-29 15:41:05 发布
最新推荐文章于 2024-02-29 15:41:05 发布
阅读量999 收藏
点赞数
分类专栏： vue element 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014636333/article/details/125305618
版权

**

问题描述：vue项目src如何动态引入本地图片？

**
以前写项目都是直接发请求给后端，然后后端返回图片路径，直接赋值给循环的img标签就可以，最近自己使用的本地图片。如果是这样直接写在标签上是没问题的，但是写在数组循环就不可以然后将路径写在一个数组里面，但是加载失败，显示找不到，就是下图，
在这里插入图片描述
在这里插入图片描述

解决办法：给img通过require引入就可以

在这里插入图片描述

这样的话就显示在页面上了

吴哈哈！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于vue 动态加载图片src的解决方法
08-28
下面小编就为大家分享一篇基于vue 动态加载图片src的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中动态引入图片
最新发布
qq_41742576的博客
02-29 872
可以看出普通加载的图片会被编译成/img/img.13eb2ff7.jpeg这种路径，而动态加载的还是原始路径，这是因为webpack或vite，会将代码编译，最终在内容内构造出一个类似于打包后的dist文件，而就会将普通方式图片路径编译转化成dist文件夹下img文件夹下的资源。很多时间，不管是vue2，还是vue3开发中都会遇到，动态渲染图片的功能，但是为什么我们直接将图片的路径直接赋值给变量的时候，图片渲染不出来，而通过require引入加载图片后却能正常渲染呢？（以下代码为vue3，vue2一样）
Vue3 用src动态引入本地图片
森姐姐的博客
11-20 8562
Vue3 用src动态引入本地图片
img加载图片的三种方式
wangluoxiehui的专栏
12-23 7136
html img标签加载图片的三种常用方式
vue使用img标签:src属性动态引入资源路径的方法
weixin_44341110的博客
07-02 2432
vue中img动态绑定资源的方法
vue3动态引入图片(:src)
Mr-yang的随笔
10-27 5253
vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上 hash值，但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题。实际上我们不希望资源文件被wbpack编译可以把图片放到public 目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致，这点跟webpack是一致的。我们的目标静态文件在 src/assets/images/home/home_icon.png。
img标签中，src后添加本地目录图片问题，加载本地资源失败问题
qq_45598161的博客
04-23 5100
由于过几天进行项目答辩，然而阿里云的服务器明天就到期了，于是把项目中的图片路径都改成了本地路径，启动程序发现图片不见了。 F12查看爆红 Failed to load resource:XXXXXX，加载资源失败。 图片也都变成了下面的样子。 就很神奇，因为发布到线上服务器时是没有问题的。上网查了之后才发现，原来是谷歌浏览器的安全性问题，也就是说为了安全，谷歌浏览器访问项目时是无法加载本地目录的资源的（其他浏览器没有尝试过）。 这就很苦恼，在网上找了很久，有的是让改Tomcat的server.xml文
vue src动态加载请求获取图片的方法
10-17
主要为大家详细介绍了vue src动态加载请求获取图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue项目引入ts步骤(小结)
10-16
主要介绍了vue项目引入ts步骤(小结),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中img src 动态加载本地json的图片路径写法
10-17
主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue 中img的src属性绑定问题-后端传递图片名称前端进行渲染
Mr_WoLong
09-09 1582
vue 中img的src属性绑定问题-后端传递图片名称前端进行渲染 应用 <img :src="`/imgs/${type.name}.svg`" alt="type-img" class="type-img" /> 后端返回数据 [ { "catalogue": { "name": "Configuration" }, "types": [ { "name"
Vue v-for :src 循环显示图片
weixin_43637766的博客
04-21 2674
Vue v-for :src 循环显示图片
当Vue中img的src是动态渲染时不显示问题（小白易坑）
水稻南曦jsnancy的博客
07-09 2万+
---------------&gt;&gt;最近遇见动态渲染img时，想起了当初刚开始写vue时，曾经遇见的一个小小坑。Vue中：img的src属性是动态渲染时不显示问题1.需求：展示用户头像，数据从后台获取，如果没有拿到则显示默认图片。如图：2.第一次写：如图：3.结果（汗。。。）并没有显示默认图片来代替：审查元素发现没显示默认的图片，图片没有被打包。。。。如图：4.解决方案：（使用requi...
小程序图片src本地服务器路径,微信小程序 图片加载（本地，网路）实例详解...
weixin_39625563的博客
07-30 5991
微信小程序 图片加载(本地，网路)实例详解发布时间：2020-08-23 22:53:03来源：脚本之家阅读：361作者：Coco-LG在微信小程序中，要显示一张图片，有两种图片加载方式：加载本地图片加载网络图片加载本地图片src="/image/arrowright.png"这句就是加载本地图片资源的。想想iOS中的加载本地图片，imageName:,类似。加载网络图片微信在加载网络这方面封装的...
Vue项目引入图片的两种场景和三种方式
weixin_50885665的博客
07-28 5909
public目录Bash。
后端返回验证码图片vue获取
weixin_44289771的博客
04-14 3336
后端返回验证码图片vue获取
vue src动态加载请求获取的图片
热门推荐
kylvia的专栏
05-18 6万+
一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, ...
vue3本地图片引入
07-28
你可以使用import语法来引入图片，并将其赋值给一个变量，然后在模板中使用这个变量作为图片的src属性。例如： ```javascript import chatHealth from '@/assets/chat-health.png' <img :src="chatHealth" alt="" />...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值