vue 图片路径 “@/assets“ 报错问题及解决
更新时间：2022年09月22日 09:25:27 作者：小艾菜菜菜
这篇文章主要介绍了vue 图片路径 “@/assets“ 报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
问题
在更改背景图片时写的图片相对路径是这样的：
由于@在webpack 被resolve.alias配置下等价于/src，然后直接运行了程序结果报错了
报错状态：
大概意思就是说，无法解析 asset 包
解决
经过查询资料找到了解决办法：
由于相对根目录的路径 “/assets/background.png” webpack不解析
此时需要在@前加上“~”
因为带“~”的路径 “~@/assets/background.png” 被webpack解析为 require(src/assets/background.png) 动态引入
就能成功的解决上面的问题
为什么
至于为什么会这样
请看继续往下看：
注意：绝对路径方式导入的图片需要存储在 publiic 文件夹下
静态导入文件路径
<img src="../../assets/1.png" /> <!-- 或者如下 --> <img src="@/assets/1.png" />
静态导入绝对路径
<img src="images/1.png" /> <!-- 或者如下 --> <img src="/images/1.png" />
动态导入相对路径
方法1（require 写在html中）：
<img :src="require('../../assets/' + imageUrl)" />
<script>
export default {
data() {
return {
// 图片路径变量，真实路径为 assets/images/1.png
img: 'images/1.png',
imageUrl: require('../../assets/' + this.img)
}
}
}
</script>
动态导入绝对路径
<img :src="imageUrl" />
<script>
export default {
data() {
return {
// 图片路径变量，真实路径为 public/images/1.png
imageUrl:'images/1.png'
// 或者 imageUrl:'/images/1.png'
}
}
}
</script>
需要明白以下几点内容：
- 1.什么是相对路径和绝对路径？
- 2.相对路径上加 @ 为什么不一样？
- 3.动态加载时为什么使用require？
1.什么是相对路径和绝对路径？
简单的说就是：
- 相对路径：以 .开头的，例如./、../之类的。就是相对于自己的目标文件的位置。
- 绝对路径： 以/开头的。就是目标文件的真实路径，表示当前站点的真是根目录。
2.相对路径加上 @ 为什么不一样？
请仔细阅读以下内容：
3.动态加载时为什么使用require？
<img :src="'./assets/images/02.jpg'" alt=""> // 错误的引入方式 <!-- 编译后 --> <img src="./assets/images/02.jpg" alt=""> <!-- 注意（绝对路径） --> <img :src="'images/02.jpg'" alt=""> // 正确的引入方式 <!-- 编译后 --> <img src="images/02.jpg" alt="">
src调用了v-bind指令处理其内容，相对路径不会被webpack的file-loader处理。
编译后，资源目录assets结构已变，而代码的目录没变，所以相对路径这种方式不行，而绝对路径没有问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3组件的开发，上一篇文章我们价绍了Vue3（三）网站首页布局开发，今天继续上篇内容展开组件的开发,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了Vue自定义部分页面显示导航栏,在设计导航栏的时候，考虑到登录之前不能浏览该网站，所以需要在登录页和注册页不能出现导航栏，登录后的页面才能出现导航栏，本文给大家解决这个问题，感兴趣的朋友跟随小编一起看看吧2022-10-10
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
下面小编就为大家分享一篇浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue组件全局注册实现警告框的实例,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了详解vue的diff算法原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了Vue3中jsoneditor的使用相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解下2024-01-01
本文主要介绍了Element的Message弹窗重复弹出，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue element-ui动态横向统计表格的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。下面通过本文给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧2018-01-01
最新评论