大事件项目40---Vue代码里如何引入相对路径图片

简介: 大事件项目40---Vue代码里如何引入相对路径图片

1、Vue代码里如何引入相对路径图片,你写成上面的就能够显示了,下面写个:,能成功吗?

2、我们先把变量声明一下

3、图片的路径无,我直接跟他复制了 4、所以我在变量里装

5、把变量赋予给ing,src

6、这里写行不行,你发现还是404

7、我们发现属性,最后原封不动的给了img,webPack会对图片的路径做处理

8、引入图片要用静态资源路径,因为他在打包时候,会做一下流程化控制,经过这样的处理,他竟然变成服务器,跟路精的图片

9、分析样式代码,发现样式代码url,Vue变量中标签,都会赋予给标签进行使用

10、都能通过图片文件找到你的真身

11、我写的路径,他变成了打包成内存里的路径

12、JS要打包图片数据,就要import进行引入,将它转换模块数据

13、这里最后进行git提交

14、如果是个外链地址,那么这个值他就会原封不动的进行显示

15、发现外链的时候,就不找文件夹了

相关文章
|
3天前
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
9 0
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用,提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板,链接指向了详细的资源。页面中还包含了一张图片,但markdown格式中无法直接显示。简而言之,这是关于一个基于Vue的后台管理界面模板的参考信息。
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
106 0
重读vue电商网站45之项目优化上线
|
3天前
|
JavaScript 前端开发
Vue,如何引入样式文件
Vue,如何引入样式文件
|
3天前
|
JavaScript
|
3天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
5 1
|
3天前
|
JavaScript 前端开发 API
|
3天前
|
JavaScript 前端开发 网络架构
Vue如何实现页面跳转路由,实现单页面跳转
Vue如何实现页面跳转路由,实现单页面跳转
|
3天前
|
JavaScript
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug
Vue搭配ELEMENT组件,路由不能正确跳转bug