vue 图片路径 “@/assets“ 报错问题及解决_vue.js_

问题

在更改背景图片时写的图片相对路径是这样的：

由于@在webpack 被resolve.alias配置下等价于/src，然后直接运行了程序结果报错了

报错状态：

大概意思就是说，无法解析 asset 包

解决

经过查询资料找到了解决办法： 

由于相对根目录的路径 “/assets/background.png” webpack不解析 

此时需要在@前加上“~” 

因为带“~”的路径 “~@/assets/background.png” 被webpack解析为 require(src/assets/background.png) 动态引入

就能成功的解决上面的问题

为什么

至于为什么会这样 

请看继续往下看： 

注意：绝对路径方式导入的图片需要存储在 publiic 文件夹下

静态导入文件路径

静态导入绝对路径

动态导入相对路径

方法1（require 写在html中）：

动态导入绝对路径

需要明白以下几点内容：

• 1.什么是相对路径和绝对路径？
• 2.相对路径上加 @ 为什么不一样？
• 3.动态加载时为什么使用require？

1.什么是相对路径和绝对路径？

简单的说就是：

• 相对路径：以 .开头的，例如./、../之类的。就是相对于自己的目标文件的位置。 
• 绝对路径： 以/开头的。就是目标文件的真实路径，表示当前站点的真是根目录。

2.相对路径加上 @ 为什么不一样？

请仔细阅读以下内容：

3.动态加载时为什么使用require？

 // 错误的引入方式  // 正确的引入方式 

src调用了v-bind指令处理其内容，相对路径不会被webpack的file-loader处理。 

编译后，资源目录assets结构已变，而代码的目录没变，所以相对路径这种方式不行，而绝对路径没有问题

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！