vue.js 引用背景图 background 无效的3种解决办法

最新推荐文章于 2024-07-16 20:23:58 发布

前端劝退师儿

最新推荐文章于 2024-07-16 20:23:58 发布

阅读量1.2k

点赞数

分类专栏：前端 vue 文章标签： vue.js html html5

本文链接：https://blog.csdn.net/u011329400/article/details/120648449

版权

前端同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中遇到背景图无法显示的问题及其解决办法。通过三种不同的引入方式，包括直接使用url、内联样式以及模板语法，并提供了一个错误代码的示例和修正方法。此外，还提及了可能的配置调整，如修改`build/utils.js`中的`ExtractTextPlugin`。文章最后提醒读者，如果使用vue-cli，可能需要调整publicPath。

摘要由CSDN通过智能技术生成

效果图预览：

1. 正确的代码，示例如下：

Html

<template>
  <div class="demo">
    <!-- 成功引入的三种方法： -->
    <!-- 图1 -->
    <div class="img1"></div>
    <!-- 图2 -->
    <div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
    <!-- 图3 -->
    <img src="~@/../static/images/logo3.png" width="100">
  </div>
</template>

<script>
import Bg2 from '@/../static/images/logo2.png'

export default {
	name: 'App',
	data () {
	    return {
			bg2: Bg2,
	    }
	}
}
</script>

<style>
	.demo{width: 100px;margin: 50px auto;}
	.img1{
	    width: 100px;
		height: 100px;
	    background: url('~@/../static/images/logo1.png') center center no-repeat;
	    background-size: 100px auto;
	}
	.img2{
		width: 100px;
	    height: 100px;
	    background-position: center center;
	    background-repeat:  no-repeat;
	    background-size: 100px auto;
	}
</style>

上述代码中，出现了诸如：~@/和 @/，如果删除后，测试效果也正常，你也可以都去掉，不影响。

2. 错误的代码，截图对比，如下：

报错结果截图如下：

修改为正确代码方法，类比如下：

Html

<div :style="{backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)', width: '400px', height: '400px'}">foo</div>

具体参考官方文档：Class 与 Style 绑定
相比其他方法：
如果你用了vue-cli脚手架，在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: '../../'就行了(本人未测试)。

其他未测试到的状况，本文暂不深入发掘，如有发现另类bug，后续将会出博客讨论，欢迎关注分享更多精彩。

以上就是关于“vue.js 引用背景图 background 无效的3种解决办法”的简单介绍。