vue background-image 不显示问题的解决

更新时间：2022年10月12日 10:32:09 作者：念旧、sunshine

这篇文章主要介绍了vue background-image 不显示问题的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue background-image 不显示

1、不能放到assets中。static文件在src目录下。也可以将文件放到public

2、路径前面一定要对。../

3、 width: 100%;height: 100%;只是根据内容来展示大小。图片并不能百分百显示。需要加position；否则看不到图片

.container {
  width: 100%;
  height: 100%;
   position:fixed;
    top: 0;
    left: 0;
  background:url('../static/background.png') no-repeat;
}

在img中可以：

<img src="~assets/img/background.png" width="596px" height="427px"/>

vue background-image问题

今天在设置文本框的背景图片的时候，遇到一个问题，就是路径正确，但是无法正常显示图片。如果这个路径写在了css里面，也可以正常显示，但是写到HTML里面，无法正常显示。

如上图所示，上面的是我写在模板里的，是该图片实际存储的地址，无法正常显示。下面的是写在将红框内的地址写到css后的结果，可以看到地址已经变了，应该是编译后的地址。

解决方案

图片地址不需要改变，只需要使用require对图片进行导入即可。

<input :style="{ 'backgroundImage':'url('+ urlIcon +')' }"/>

this.icon = 'background.jpg'
// 直接required 直接使用 this.icon 引用 '../../assets/background.jpg'路径会报错
this.urlIcon = require('../../assets/'+this.icon)

即可正常显示。

小结一下：

动态引入背景图片需要使用require关键字

require内不能使用纯变量，可以使用将字符串类型的变量改为拼接字符串

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

基于Vue实现文件拖拽上传功能
文件拖拽上传功能现在已经随处可见,大家应该都用过了吧,那么它具体是怎么实现的大家有去了解过吗,今天我们一起来实现一下这个功能,并封装一个拖拽上传组件吧
2024-03-03
一文带你搞懂V8垃圾回收系统
在V8中，JavaScript的内存空间分为栈（Stack）和堆（Heap）两部分，垃圾回收的基本思路是：查找内存中的所有变量，看哪些已经不再需要，然后释放这些变量所占用的内存，本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下
2023-07-07
Vue3实现简易音乐播放器组件
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
关于element-ui中el-form自定义验证(调用后端接口)
这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
解决vue表单为空也能提交的问题
这篇文章主要介绍了解决vue表单为空也能提交的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue路径上如何设置指定的前缀
这篇文章主要介绍了vue路径上如何设置指定的前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue使用NProgress实现页面顶部的进度条显示效果
这篇文章主要介绍了vue Nprogress页面顶部进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条，本文通过实例代码给大家讲解，需要的朋友可以参考下
2022-12-12
unplugin-auto-import与unplugin-vue-components安装问题解析
这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue实现滑动拼图验证码功能
这篇文章主要介绍了Vue实现滑动拼图验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
vue-cli3项目在IE浏览器打开兼容问题及解决
这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08