最近在vue项目开发中，看到不同的小伙伴，引入图片的方式不尽相同。有点把自己整不会了，故决定好好研究一下，看看vue项目中图片路径的正确打开方式到底是啥？
Vue项目中，图片放置的位置一般有两个：public文件夹、src-assets文件夹，所以，接下来，我们具体说说，位于不同位置的图片，到底如何正确引用。
图片在public文件夹中
因为public文件夹下静态资源，不经过 webpack，需要通过绝对路径来引用，所以，如果引用的图片在public文件夹中，则无论是html/js/css中，均以baseUrl（一般是“/”）开头书写路径，例如：
<style>
.example{
background: url('/bg.png') right bottom no-repeat
}
</style>
图片在src-assets文件夹中
因为assets文件夹下的图片等静态资源，经过 webpack，需要通过相对路径引用，所以我们可以分情况按如下方式引用：
1.js中引用图片
- require 引入
</template>
<div style="display:flex;">
<div v-for="item in imgUrl" :key="item.id">
<img :src="item.imgSrc" class="num" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: [
{ id: 1, imgSrc: require("@/assets/images/1.jpg") },
{ id: 2, imgSrc: require("@/assetsimages/2.jpg") },
{ id: 3, imgSrc: require("@/assets/images/3.jpg") },
],
};
},
};
</script>
require 是 node 中的一个方法，他的作用是 “用于引入模块、 JSON、或本地文件”。用require定义之后就可以动态使用了。
而@是webpack设置的src文件夹的路径别名，不用@的话则按相对路径找到该图片即可。
- import导入
</template>
<div>
<img class="" :src="imgUr" alt="">
</div>
</template>
<script>
import imgUrl from "@/assets/images/1.jpg"
export default {
data() {
return {
imgUr
}
}
}
</script>
2.css中引用图片
<style>
.example {
background: url(~@/assets/logo.png) no-repeat;
}
</style>
~ 是 stylus-loader 的东西，是相对于其他路径（文件）的，类似于相对路径。
css中引用图片需要用~@或者相对路径，并且不要写成字符串。
3.html中引用图片
<template>
<img src="~@/assets/logo.png" alt="">
<img src="@/assets/logo.png" alt="">
<img src="../../assets/logo.png" alt="">
</template>
html中引用图片，使用@或者~@或者相对路径都行。
知识拓展
微信小程序中设置背景图片
微信小程序中使用 “background-image:url()” 设置背景图片是不可以加载本地图片的，可用以下方案解决：
- 直接使用服务器上的图片(http/https），推荐。
- 将图片转化成base64格式。缺点：base64内容太长了，影响样式代码阅读。
- 使用image组件，在布局下面盖上一层图片。缺点：布局结构可读性不高。
设置多个背景图片
.example1 {
background-image: url(), url();
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
//缩写
.example1 {
background: url() right bottom no-repeat, url() left top repeat;
}
背景图片按书写顺序，从外层向里层放置
背景图片与背景颜色同时存在
1、纯色背景+背景图片
.example1 {
background-image: url(); // image可以不要
background-color: #3772FF;
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
// 简写
.example1 {
background: #3772FF url() right bottom no-repeat
}
2.渐变色背景 + 背景图片
.example1 {
background: url() right bottom no-repeat / 50%, linear-gradient(to right, #02b0b0, #03ceac);
}
背景缩写属性background
背景缩写属性可以在一个声明中设置所有的背景属性。
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment
各值之间用空格分隔，不分先后顺序，可以只有其中的某些值。
背景相关属性介绍
| 值 | 说明 |
|---|---|
| background-color | 指定要使用的背景颜色。 |
| background-position | 指定背景图像的位置。默认放在元素的左上角，其值有以下形式： 1.left top：如果仅指定一个，其他值将会是"center" 2.x% y%：如果仅指定一个，其他值将会是50% 3.xpos ypos：单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个，其他值将是50％。可以混合使用％和position |
| background-size | 指定背景图片的大小。其值有以下形式： 1.length: 设置背景图片宽度和高度，如果只给出一个值，第二个是设置为 auto(自动) 2.percentage：将计算相对于背景定位区域的百分比。 各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)" 3.cover：保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 4：保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小 |
| background-repeat | 指定如何重复背景图像。其值有如下形式： 1.repeat：背景图像将向垂直和水平方向重复。这是默认 2.repeat-x：图像水平方向重复 3.repeat-y：图像垂直方向重复 4.no-repeat：图像不重复 |
| background-origin | 指定背景图像的定位区域，即指定background-position属性的相对位置。如果背景图像background-attachment是"固定"，这个属性没有任何效果。其值有如下形式： 1.padding-box: 背景图像填充框的相对位置 2.border-box: 背景图像边界框的相对位置 3.content-box:背景图像的相对位置的内容框 |
| background-clip | 指定背景图像的绘画区域，其值有如下形式： 1.padding-box: 默认值。背景绘制在边框方框内（剪切成边框方框）。 2.border-box: 背景绘制在衬距方框内（剪切成衬距方框）。 3.content-box:背景绘制在内容方框内（剪切成内容方框）。 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。其值有如下形式： 1.scroll: 背景图片随着页面的滚动而滚动，这是默认的。 2.fixed: 背景图片不会随着页面的滚动而滚动。 3.local:背景图片会随着元素内容的滚动而滚动。 |
| background-image | 指定要使用的一个或多个背景图像，写法如下：background-image: url()，括号里是图片的路径，路径书写时可加引号也可不加引号，一般建议不加引号。 |
