最近在使用vue的时候,发现竟然不会引入图片,悲哀啊,于是乎。。。

这篇博客主要讲述了在Vue项目中如何正确引入图片,包括绝对路径和相对路径的使用,以及assets和public目录的区别。作者强调了webpack对不同路径资源的处理方式,并提到了公共路径(publicPath)配置的重要性,尤其是在应用部署在非根路径时。
摘要由CSDN通过智能技术生成

最近在使用vue的时候,发现竟然不会引入图片,悲哀啊,于是乎。。。
于是乎就狠狠地学习了一遍,
接下来我们来看看,图片引入无非是路径问题,路径就会有绝对路径,和相对路径这两个说法,
有一种引入方式就是直接引入绝对路径

<img src="C:\Users\Administrator\Desktop\project\development\project_route\src\assets\image\icon_update\icon.png">

还有一种引入方式,相对路径

<img src=".\src\assets\image\icon_update\icon.png">

当然静态资源的几种引入方式
在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。

诸如<img src="…">、background: url(…) 和 CSS @import 的资源

写在 template 中内联 style 的 background: url(…) 样式,在当前版本的测试中,即使使用了相对路径也不会被webpack处理

例如,url(./image.png) 会被翻译为 require

博客
v8worker
05-08 2892
05-06 2872
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值