发现问题:缓存

之前react的图片,也在style里面,也无所谓。

刚做了一个输入框,change的时候改变图片,每次都刷新图片,关键是没缓存,这哪受得了

之前用的:



网上搜索各种插件,替换什么的,都不好使。

最后的解决方案:

  1. 将css文件,放到 public下,然后就变成公共资源,也不参与打包,也就不会报错了。
  2. 将index.html中加入 <link rel="stylesheet" href="./assets/css/searchList.css" />
  3. class的全局属性就能用了,解决了图片的相对路径的问题。

backgroundImage: "url('./assets/images/searchBottomBg" + bgNum + ".jpg')",
.searchListBg1 {
background-image: url('../images/searchBottomBg1.jpg');
}

react中css里面 class中的 图片的相对地址 完美解决 backgroundImage的更多相关文章

  1. 关于页面中css某些情况下出现不知原因的隔断解决办法

    第一种方法:body{margin:0px;padding:0px position:absolute; top:0px;left:0px;} html{ width:100%; overflow-x ...

  2. ASP.NET中引用dll“找不到指定模块"的完美解决办法 z

    DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL导出的函数的必要调用信息.DllImport属性应用于方法,要求最少要 ...

  3. PyQt5在QWidget窗体中显示Qwidget的自定义类(补:完美解决)

    [概览] 1.显示原生Qwidget 1)不使用布局(绝对定位) 2)使用布局 2.显示Qwidget的自定义类 1)不使用布局(绝对定位)       2)使用布局 [知识点] 1.显示原生Qwid ...

  4. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  5. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  6. React中css的使用

    网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...

  7. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  8. vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)

    之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...

  9. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  10. CSS从大图中抠取小图完整教程(background-position应用)

    CSS从大图中抠取小图完整教程(background-position应用)  转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...

随机推荐

  1. 万字剖析OpenFeign整合Ribbon实现负载均衡的原理

    大家好,前面我已经剖析了OpenFeign的动态代理生成原理和Ribbon的运行原理,这篇文章来继续剖析SpringCloud组件原理,来看一看OpenFeign是如何基于Ribbon来实现负载均衡的 ...

  2. ajax中的同步异步和跨域请求

    ajax中的同步异步和跨域请求 同步异步 demo.html <script> $.ajax({ type: "get", async: false, data: &q ...

  3. CF1045G AI robots题解

    题目链接:洛谷 或者 CF 本题考虑转化为 cdq 分治模型 对于 cdq 分治来说,只需要考虑左边对右边的影响,那我们要考虑该怎样设置第一维度的左右对象.很显而易见的是抛开 \(q\) 限制而言,我 ...

  4. XmlDocument 解决 Clone、CloneNode、ImportNode 等节点克隆后的标签自闭合问题

    前言: 这两天在对 Taurus.Mvc 做 html 加载性能优化时,发现存在这个问题. 具体优化的是 CYQ.Data 组件的 XHtmlAction 相关类. 问题过程: 之前 XmlDocum ...

  5. AutoGPT是什么?超简单安装使用教程

    1.AutoGPT 最近几天当红炸子鸡的是AutoGPT,不得不说AI发展真快啊,几天出来一个新东西,都跟不上时代的脚步了. AutoGPT是一个开源的应用程序,展示了GPT-4语言模型的能力.这个程 ...

  6. junit使用stub进行单元测试

    stub是代码的一部分,我们要对某一方法做单元测试时,可能涉及到调用第三方web服务.假如当前该服务不存在或不可用咋办?好办,写一段stub代码替代它. stub 技术就是把某一部分代码与环境隔离起来 ...

  7. 使用3-hexo主题时无法正常渲染html代码

    问题描述 在hexo框架中使用3-hexo主题时,会遇到这样一个问题:在markdown中嵌入html代码,这些嵌入的html代码无法正常显示. 原因分析 在使用3-hexo主题时,默认使用主题自带的 ...

  8. linux服务器界面初始--day01

    linux服务器界面初始 ip add show 查看服务器网卡信息还可以使用ifconfig 局域网ip: 192.168.1.0 10.0.0.0 172.16.1.0 如果网卡没有启用,我们需要 ...

  9. select_for_update悲观锁

    例子,银行存款和撤销方法 1.用户A提取帐户 - 余额为100 $. 2.用户B提取帐户 - 余额为100 $. 3.用户B退出30 $ - 余额更新为100 $ - 30 $ = 70 $. 4.用 ...

  10. Flutter学习

    常用网址 免费下载 !<AliFlutter 体系化建设和实践> Flutter 开发文档 Flutter实战 Dart 编程语言概览 pub仓库 main函数使用了(=>)符号, ...