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

＃vue.js项目中，出现css调用background背景图无效？如何解决？

或者调用<img>标签，也无效果？
直接上代码，自行对比查找一下：

效果图预览

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


<template><div class="demo"><!-- 成功引入的三种方法： --><!-- 图1 --><div class="img1"></div><!-- 图2 --><div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div><!-- 图3 --><img src="~@/assets/img/pageBg.png" width="100"></div>
</template><script>
import Bg2 from '@/assets/img/pageBg.png'export default {name: 'App',data () {return {bg2: Bg2,或者:bg2: require('@/assets/img/pageBg.png')}}
}
</script><style>.demo{width: 100px;margin: 50px auto;}.img1{width: 100px;height: 100px;background: url('~@/assets/img/pageBg.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. 错误的代码，截图对比，如下：

报错结果截图如下：

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


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

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

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

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

html打印无法打印背景图片,Word/wps怎么打印背景图片？Word背景打印不出来的三种解决办法...
Word/wps怎么打印背景图片?对于使用WPS工作.学习的朋友们或许会遇到背景无法打印的问题,精美的背景.花纹常常是所做文档的一个不可或缺的部分.那么我们该如何打印出背景呢?小编在这里有多种办法. ...
避免重复运行py文件绘制海龟图报错的一种解决办法
文章目录 -问题描述: -通过按键释放事件响应来避免报错 -总结 -问题描述: 使用Python 3.7.6中的turtle库绘制海龟图,首次运行py文件,在弹窗上的海龟图成功绘制完后,点击弹窗右上角 ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
【Vue.JS】纯 Vue.js 制作甘特图
效果图在线预览 GitHub链接(包含 knockoutJS 版本与 Vue 版本) 推荐组合效果推荐与双表头固定效果组合,实现如上例中横表头(日期)纵向固定,纵表头(类型)横向固定效果. 参照连 ...
vue3利用JS切换背景图
VUE3利用JS切换背景图实践记录需要实现的功能:鼠标移入移除图标切换(在这只做移入展示) 新建一个读取图片的函数,如下 // 动态读取图片 function getImageUrl(name: s ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
css js 打印背景图
参考:https://blog.csdn.net/lidysun/article/details/88995208 如果不对浏览器设置,直接打印时是无法打印背景图的. 方法1:css @media p ...
对于引用的控件被拒绝访问的解决办法的补充(续)
在上个月,我曾经写过"对于引用的控件被拒绝访问的解决办法的补充", 见http://liuyuer.cnblogs.com/archive/2005/10/12/253063.ht ...

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

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

最新文章

热门文章