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结构已变，而代码的目录没变，所以相对路径这种方式不行，而绝对路径没有问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue 项目中的this.$get,this.$post等$的用法案例详解
vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器，第二个参数是一个可选的选项对象，首页要安装axios，本文结合案例代码给大家详细讲解vue 中的this.$get,this.$post等$的用法，一起学习下吧2022-12-12
这篇文章主要介绍了Vue2中实现dialog的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue点击项目唯一id生成器nanoid的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue3官方提供了 script setup 语法糖,只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,今天通过本文给大家分享vue3的setup语法糖简单封装ckediter的过程,感兴趣的朋友一起看看吧2023-10-10
Flutter部件内部状态管理小结之实现Vue的v-model功能
本文是 Flutter 部件内部状态管理的小结，从部件的基础开始，到部件的状态管理，并且在过程中实现一个类似 Vue 的 v-model 的功能，感兴趣的朋友跟随小编一起看看吧2019-06-06
本文主要介绍了vue+element-ui表格自定义列模版的实现,通过插槽完美解决了element-ui表格自定义列模版的问题,具有一定的参考价值,感兴趣的可以了解一下2024-05-05
这篇文章主要介绍了Vue+ElementUI 实现分页查询-mysql数据，当数据库中数据比较多时,就每次只查询一部分来缓解服务器和页面压力。这里使用elementui的 Pagination 分页 组件,配合mysql的limit语句，实现分页查询mysql数据,下面来看看具体实现过程,希望对大家学习有所帮助2021-12-12
这篇文章主要介绍了vue如何监听某个元素的大小变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因，我们接下来探究一下2022-11-11
这篇文章主要带大家从源码分析一下Vue3中的组件挂载的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-09-09
最新评论