vue2背景图片代码
时间: 2023-10-31 20:58:00 浏览: 75
在 Vue2 中,你可以使用以下代码设置背景图片:
1. 在组件的样式中设置背景图片:
```vue
<template>
<div class="container">
<!-- 内容 -->
</div>
</template>
<style>
.container {
background-image: url('../assets/background.jpg');
/* 其他样式 */
}
</style>
```
在上述代码中,`background.jpg` 是位于 `src/assets` 目录下的图片文件,你可以根据实际情况修改文件路径和样式。
2. 动态绑定背景图片路径:
```vue
<template>
<div :style="{ backgroundImage: `url(${backgroundImageUrl})` }" class="container">
<!-- 内容 -->
</div>
</template>
<script>
export default {
data() {
return {
backgroundImageUrl: require('../assets/background.jpg')
};
}
/* 其他逻辑 */
};
</script>
<style>
.container {
/* 其他样式 */
}
</style>
```
在上述代码中,我们使用动态绑定方式设置 `backgroundImageUrl` 变量,然后通过 `require()` 导入图片路径。这样可以根据需要动态修改背景图片。
以上是两种常见的使用背景图片的方式,你可以根据自己的需求选择适合的方法。