本站消息

站长简介/公众号


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群.欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(20)

2021-06(95)

2021-07(12)

2021-08(49)

2021-09(55)

Vue图片路径问题(动态引入:绝对路径、相对路径),require动态路径问题

发布于2022-04-14 21:38     阅读(1068)     评论(0)     点赞(22)     收藏(1)


Vue图片路径问题(动/静态引入:绝对路径、相对路径

DEMO实例(可快速解决问题):

注意:绝对路径方式导入的图片需要存储在 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>

需要搞明白这几点

  1. 什么是相对路径和绝对路径?
  2. 相对路径加上@为什么不一样?
  3. public文件夹有什么不同?
  4. 为什么绝对路径导入的图片需要在public文件夹下?
  5. 动态加载时为什么使用require?
  6. require为什么不能直接用变量接收地址?

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

简单说就是:

相对路径:以.开头的,例如./../之类的。就是相对于自己的目标文件的位置。

绝对路径:以/开头的。就是目标文件的真实路径。表示当前站点的根目录。

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

仔细读完这两张图片就懂啦。
在这里插入图片描述
在这里插入图片描述
Vue CLI 官方介绍

3.public文件夹有什么不同?

来看一下通过 npm run build 打包之后生成的文件夹。简单来说,就是以后你要将这些文件部署到服务器上去。除了原来public文件夹下的data目录(红框标注),其他文件夹都是经过webpack打包后得到的。不再是原来的目录结构了,名字也不一样了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4zXskRBO-1640685473863)(C:\Users\chengjian\AppData\Roaming\Typora\typora-user-images\image-20211228171021620.png)]

4.为什么绝对路径导入的图片需要在public文件夹下?

摘自 Vue CLI 官网:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ca32875a-1640685473864)(C:\Users\chengjian\AppData\Roaming\Typora\typora-user-images\image-20211228172307016.png)]

简单来说,就是 public 目录下的文件不会被编译,部署后可以通过绝对路径获取到。如果还放在原来的 assets 目录中,就会被webpack打包成新的文件夹,故而过去不到。

5.动态加载时为什么使用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结构已变,而代码的目录没变,所以相对路径这种方式不行,而绝对路径没有问题。

6.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


站长简介:高级工程师,爱好交友,无偿辅导python和前端,技术交流,面试指导,找工作指导,瞎聊都可加我微信i88811i哈,欢迎欢迎!也欢迎加入程序员交流群,专属程序员的圈子,加我微信拉你进群
欢迎关注我的公众号:程序员总部,关注公众号回复前端,免费领取 全套前端视频教程,关注公众号回复前端充值+你的账号,免费为您充值1000积分



所属网站分类: 技术文章 > 博客

作者:大哥你来啦

链接:http://www.qianduanheidong.com/blog/article/330460/bfac4f38f1b86cccb272/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

22 0
收藏该文
已收藏

评论内容:(最多支持255个字符)