发布于2022-04-14 21:38 阅读(5717) 评论(0) 点赞(22) 收藏(1)
注意:绝对路径方式导入的图片需要存储在 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
imageUrl: 'images/1.png'
}
}
}
</script>
方法2( require
写在js中 ):
<img :src="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>
@
为什么不一样?require
?require
为什么不能直接用变量接收地址?简单说就是:
相对路径:以.
开头的,例如./
、../
之类的。就是相对于自己的目标文件的位置。
绝对路径:以/
开头的。就是目标文件的真实路径。表示当前站点的根目录。
@
为什么不一样?仔细读完这两张图片就懂啦。
Vue CLI 官方介绍
来看一下通过 npm run build
打包之后生成的文件夹。简单来说,就是以后你要将这些文件部署到服务器上去。除了原来public文件夹下的data目录(红框标注),其他文件夹都是经过webpack打包后得到的。不再是原来的目录结构了,名字也不一样了。
摘自 Vue CLI 官网:
简单来说,就是 public
目录下的文件不会被编译,部署后可以通过绝对路径获取到。如果还放在原来的 assets
目录中,就会被webpack打包成新的文件夹,故而过去不到。
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结构已变,而代码的目录没变,所以相对路径这种方式不行,而绝对路径没有问题。
require
为什么不能直接用变量接收地址?`<!-- 错误用法 -->
<img :src="require(imageUrl)" /> // 变量 imageUrl: '../../assets/images/1.png'
解决办法:用字符串模板或变量名+空字符串。
let url = './data/test.json';
const json1 = require(url); //错误用法
const json2 = require(`${url}`); //正确用法
const json3 = require(url + ''); //正确用法
配上一条相关解释链接:
https://www.zhihu.com/question/421711093
这块应该是webpack的实现问题,有兴趣去多了解下吧,使用的话看完这篇就够了!
原文链接:https://blog.csdn.net/weixin_45768768/article/details/122199323
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/330460/bfac4f38f1b86cccb272/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!