vue 写相对路径图片不显示

已于 2023-11-30 15:56:30 修改
阅读量2.4k 收藏 1
点赞数 3
分类专栏： 前端踩坑专栏合集 文章标签： javascript css html5 html vue.js
于 2023-10-31 12:40:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40808668/article/details/106902523
版权
本文介绍了在Vue项目中遇到的相对路径图片无法显示的问题，原因是webpack打包后本地路径失效。解决方法是在data中使用require动态引入图片路径，通过这种方式成功解决了图片显示的问题。
摘要由CSDN通过智能技术生成

我们一般直接在vue的文件中直接引入路径是不能显示的,如图
在这里插入图片描述
原因是因为webpack打包后本地路径丢失，所以我们在data中可以通过require去引入
改正后的代码
在这里插入图片描述
在data中定义值并传入路径
在这里插入图片描述
欧克欧克，大功告成

嚣张农民
关注
专栏目录
订阅专栏
vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
weixin_39608134的博客
02-11 1110
最近在作一个树形结构的组件，使用了Vue和element UI中el-tree组件。由于树中每一个节点都须要显示一个图标图片，而且须要根据后台传入的数据类型动态地显示，因此图片的路径须要动态地加载。下面是核心组件代码：html {{ node.label }}后台交互使用了vuex和axios，本篇文章后台数据没有问题，因此不作展现了。后台传入的数据结构是这样的：vue{"i...
Vue 自定义标签的src属性不能使用相对路径的解决
10-16
主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 解决data中定义图片相对路径页面不显示的问题
10-14
主要介绍了vue 解决data中定义图片相对路径页面不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue打包为相对路径
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-27 1370
对于更复杂的部署需求，可以编写自定义脚本来处理资源路径。通过上述内容，我们不仅了解了如何在Vue项目中配置打包输出的资源文件路径为相对路径，还学习了如何解决常见的问题及一些实用的技巧。希望这些内容能够帮助你在实际开发中更好地管理和配置应用的资源路径。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
Vue项目：将资源路径使用相对路径后，部分图片无法显示
engineer_why的博客
10-15 587
在资源路径改变为相对路径后，我发现代码中比如css引入的图片，它还是处于绝对地址，并且没有办法显示出来，提示为404找不到图片。
vue中data中定义图片相对路径页面不显示问题
彳亍的博客
11-18 2887
vue在data中定义图片相对路径： data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; } 页面使用va...
vue中使用相对路径图片不显示
m0_73665762的博客
09-07 765
因为webpack问题，webpack打包会将静态资源放在一个webpack创建的Img文件夹中，并且图片名字还会被更改。我的文件目录是没有Img文件夹的，且图片名字没有那串乱字符。
vue背景图片相对路径不显示问题
gahsuxjxnxn的博客
07-21 346
确认路径地址没错的情况下，图片就是不显示后来改成以下形式就正常显示了。注意一定不要忘了加冒号 ： ，不然没有效果。
解决Vue打包后访问图片/图标不显示的问题
10-16
总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...
vue webpack build资源相对路径的问题及解决方法
01-19
默认情况webpack+vue-cli打包的css、js等静态资源路径都是绝对的，即static在根目录下，如果部署到带有文件夹目录的项目中，资源路径就会出错。 如图： 解决方法: 在webpack.prod.conf.js中，output中添加或者...
Vue项目引用相对路径图片不显示
学习使我快乐_玉祥
08-16 716
一般图片放入src/assets/文件夹下或者src/static/文件夹下，没有文件夹自己创个 以前静态页面的引用方式 ./src/assets/logo.png 这样的方式在Vue中是不显示的， 需要换另一种方式： logourl:require('@/assets/logo.png'), 然后绑定img的src为logourl ok，可以显示。 ...
Vue——绑定图片路径使用相对路径图片显示不出的解决方案
CaseyWei
12-07 844
Vue——绑定图片路径使用相对路径图片显示不出的解决方案
Vue项目引用相对路径图片不显示问题
guoyp2126的博客
05-08 1758
通常将图片放入src/assets/文件夹下，在view中绑定图片，如： <van-image round width="2rem" height="2rem" :src="headerUrl" /> headerUrl是VM定义的图片路径，代码如下： data () { return { headerUrl: '../assets/images/unlogin.png', } } 界面上图片不显示，解决办法，修改data中代码如下即可显示 data ()
【Vue】绑定图片路径使用相对路径图片显示不出的解决方案
Pulse的博客
04-18 1158
Vue绑定图片路径使用相对路径图片显示不出的解决方案
vue 数组中相对路径的图片 不显示问题
qq_35457469的博客
08-27 1501
例如： data () { return { img: './../../assets/sec03_1.jpg' //路径也没问题啊，怎么不显示呢，难道他瞎啦！ } } 在template中: <img :src="img" /> 第一种解决方案是：简单粗暴型 使用绝对路径也就是带上域名即可 第二种解决方案是：非常智慧型 代码如下： data ()...
vue 相对路径的图片 不显示问题
weixin_30496751的博客
04-10 1014
例如 data () { return { img: '../../images/jifen/index/img_list_default_pic.jpg' //路径也没问题啊，怎么不显示呢，难道他瞎啦！ } } 然后在template中 <img :src="img" /> 第一种解决方案是：简单粗暴型 使用绝对...
vue输入图片路径显示不出来（基础问题）
快乐学习
05-14 2451
在vue项目里面插入图片的路径，插入路径方式不正确，导致图片一直不能显示。复制文件中的相对路径，然后去掉上一级目录，用。这是由于相对路径的前面要加上。，这个可以代替第一层包。
vue 中 给img图片添加动态路径 路径正确但是图片不显示问题
飞翔༒之翼
12-16 5427
【代码】vue 中 给img图片添加动态路径 路径正确但是图片不显示问题。
vue项目中src引入相对路径的图片不显示问题
weixin_44385915的博客
02-22 3522
如下所示： <template> <img :src="img" alt=""> </template> export default { data () { img: './logo.png' } } 这样动态引入图片，在页面会显示不出, 在这里有两种方法可以解决，造成这种现象的原因，我最后会说明 解决方法 第一种：直接 import 导入图片 <template> <img :src="img" alt=""> <
vue根据路径显示图片
08-22
例如，如果路径是相对路径，可以直接传入路径字符串。引用所示的代码片段展示了一个使用`<el-avatar>`组件显示图片的示例。在代码中，`scope.row.image`表示图片的路径，它会被动态地绑定到`src`属性上，实现了根据...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嚣张农民

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值