Vue中背景图片无法加载

遇到过这种情况，调试的时候图片是存在的，能够在style中看到图片的，但是背景就是无法显示。特别奇怪的是如果不是给整个body加background或者对最外层的div的class加background，都可以添加。

比如随便选中一个类是可以成功的：

    .scores{background: url(../../images/4-2.png) no-repeat;background-size: 100% 100%;
}

但是如果这个class包裹了整个模板就不行，比如这样就不行：

<template><div class="test">//里面是本来要执行的全部代码</div></template><style lang="less">.test{background: url(../../images/4-2.png) no-repeat;background-size: 100% 100%;}</style>

为了解决这个情况我在div中使用require直接引入图片就可以，如图：

<div :style="{backgroundImage:'url('+require('../../images/1-0.jpeg')+')'}">

至于为什么我还是不知道，有哪位大佬知道了可以告诉我吗_(:з」∠)_

参考了这个：https://blog.csdn.net/qq_32963841/article/details/81512044?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1

Vue中背景图片无法加载相关推荐

vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
vue中的图片预加载
1.首先添加一个loading加载页,给一张加载的图片 <div class="load" v-if="load"><img src=&quo ...
记一次灰度发版打印背景图片无法加载的处理过程
记一次灰度发版打印背景图片无法加载的处理过程前言需求为给订单加上新的打印模板,测试环境正常,灰度环境打印不出来图片.请求服务器路径可以展示图片,使用lodop设置背景图或打印图片都无法展示解决过 ...
vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
Vue中如何进行滚动加载与无限滚动？
Vue中如何进行滚动加载与无限滚动? 随着Web应用程序的复杂性和数据量的增加,滚动加载和无限滚动成为了Web开发中常见的需求.在Vue中,我们可以使用一些插件和技术来实现这些功能. 本文将介绍Vue ...
ListView中的图片异步加载、缓存
一.ListView的图片异步加载我们都知道对每一个Weibo Item都有用户头像,而且每一条微博还可能带有图片.如果在加载列表的同时加载图片,这样有几个缺点,第一很费事,界面卡住,用户体验很不好 ...
React中实现图片懒加载
1. 下载安装懒加载模块 cnpm i react-lazyload --save 2. 在src/assets/目录下放入懒加载占位图 placeholder.gif 3. 在需要使用懒加载 ...
vue中element-ui table滚动加载
//1.在main.js里注册Vue.directive('loadmore', {bind(el, binding) {const selectWrap = el.querySelector('.e ...
element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载解决方案
vue-lazyload插件github地址:https://github.com/hilongjw/vue-lazyload#requirements 效果是默认不加载图片,先用一个占位符图来代替, ...

Vue中背景图片无法加载

Vue中背景图片无法加载相关推荐

最新文章

热门文章