English
资源说明：主要介绍了前端vue-cli项目中使用img图片和background背景图的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在前端开发中，Vue CLI 是一个非常流行的工具，它提供了快速构建 Vue.js 项目的脚手架。在Vue CLI项目中，处理图片资源，尤其是img图片和background背景图，是常见的需求。以下将详细介绍如何在Vue CLI项目中使用这两种类型的图片。
1. **使用img标签**
当需要显示图片作为内容时，通常会使用`![]()
`标签。在Vue CLI项目中，图片的引用路径需要注意。Vue CLI推荐将静态资源放在`public/static`目录下，这样它们在构建后会被复制到输出目录，并且可以通过`/static/`路径访问。
示例代码：
```html
```
注意，这里的路径是相对于`public`目录的，不需要使用`@`符号，因为这是指向`src`目录的别名。
2. **使用background属性（CSS方式）**
对于背景图，可以使用CSS的`background-image`属性。同样，确保图片位于`static`目录，然后在CSS或内联样式中引用。
示例代码：
```css
.bgImg {
background-image: url("/static/images/logo.png");
}
```
或者在Vue组件中：
```html
```
3. **使用import导入**
在Vue组件的`data`对象中，可以使用`import`语句导入图片，然后将其赋值给需要使用的变量。这种方式适用于需要动态设置背景图片的情况。
示例代码：
```javascript
import bgImg from '@/../static/images/logo.png';
export default {
name: 'App',
data() {
return {
bgImg,
};
},
};
```
4. **使用require获取图片**
`require`函数用于在JavaScript中动态加载模块，也可以用于获取图片资源的URL。与`import`类似，它返回的是一个模块的URL，可以用于`img`标签的`src`属性或CSS的`background-image`。
示例代码：
```javascript
export default {
name: 'App',
data() {
return {
bgImg: require('@/../static/images/logo.png'),
};
},
};
![]()
```
总结来说，在Vue CLI项目中，处理图片资源时，应考虑使用`public/static`目录存储静态资源，并根据实际需求选择合适的引入方式：静态引用、CSS的`background-image`、`import`或`require`。同时，注意路径的正确性，尤其是在使用模块化加载时。这些方法可以有效地解决前端开发中图片资源的引用问题，提升项目的可维护性和性能。在实际工作中，开发者还应关注图片的优化，如压缩图片大小，减少网络传输负担，提升用户体验。
```
注意，这里的路径是相对于`public`目录的，不需要使用`@`符号，因为这是指向`src`目录的别名。
2. **使用background属性（CSS方式）**
对于背景图，可以使用CSS的`background-image`属性。同样，确保图片位于`static`目录，然后在CSS或内联样式中引用。
示例代码：
```css
.bgImg {
background-image: url("/static/images/logo.png");
}
```
或者在Vue组件中：
```html
```
3. **使用import导入**
在Vue组件的`data`对象中，可以使用`import`语句导入图片，然后将其赋值给需要使用的变量。这种方式适用于需要动态设置背景图片的情况。
示例代码：
```javascript
import bgImg from '@/../static/images/logo.png';
export default {
name: 'App',
data() {
return {
bgImg,
};
},
};
```
4. **使用require获取图片**
`require`函数用于在JavaScript中动态加载模块，也可以用于获取图片资源的URL。与`import`类似，它返回的是一个模块的URL，可以用于`img`标签的`src`属性或CSS的`background-image`。
示例代码：
```javascript
export default {
name: 'App',
data() {
return {
bgImg: require('@/../static/images/logo.png'),
};
},
};
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
