发现问题:缓存

之前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. 《Spring 手撸专栏》| 开篇介绍,我要带新人撸 Spring 啦!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 不正经!写写面经,去撸Spring源码啦? 是的,在写了4篇关于Spring核心源码 ...

  2. 在Golang中实现多态

    目录 1.说明 2.多态 3.代码示例 4.总结 1.说明 和流行的面向对象语言不同,go 中没有面向对象的说法,也没有对应的封装.继承和多态,也许 go 的设计就不是和OOP对齐,想使用OOP,那就 ...

  3. PHP基础题目

    1.请写一个函数实现以下功能:字符串'open_door'转换成'OpenDoor','make_by_id'转换成'MakeById' function strHandle($str) { $ret ...

  4. 【CAS学习一】CAS服务端部署

    公司要做单点登录系统,网上搜了一下目前主流方案是CAS,故部署一个试试看. 1.下载 因为最近出现log4j2远程代码执行漏洞,尽量选择新版本已修复此漏洞的,故CAS选择6.4版本.打包部署依赖JDK ...

  5. Hive-服务启动和停止命令

    1.启动命令 #!/bin/bash nohup hive --service metastore >> $HIVE_HOME/logs/metasotre.log 2>&1 ...

  6. [Java]Java类中的各元素初始化顺序

    Java类中各元素的初始化顺序 初始化的原则是: 先初始化静态部分,再初始化动态部分:(先静再动) 先初始化父类部分,后初始化子类部分:(先父再子) 先初始化变量,次初始化代码块,再初始化构造器:(先 ...

  7. CF510D Fox And Jumping

    题目链接 题目 见链接. 题解 方法一 知识点:背包dp,STL. 题目意思是让我们判断能否从这些数中选出一些数使得选的数公共gcd为 \(1\),如果可以输出最小花费. 一眼背包dp,但要map超大 ...

  8. 使用BP神经网络实现函数逼近

    1 一元函数逼近 1.1 待逼近函数 1.2 代码 clear,clc p=[-4:0.1:4]; %神经网络输入值 t=sin(0.5*pi*p)+sin(pi*p); %神经网络目标值 n=15; ...

  9. CSS实现图形效果

    CSS实现图形效果 CSS实现正方形.长方形.圆形.半圆.椭圆.三角形.平行四边形.菱形.梯形.六角星.五角星.心形.消息框. 正方形 <section> <div id=" ...

  10. Java设计模式-桥接模式Bridge

    传统模式 案例 要求对不同手机类型的不同品牌实现操作编程(比如:开机.关机.上网,打电话等),如图: 类图 问题 扩展性问题(类爆炸),如果我们再增加手机的样式(旋转式),就需要增加各个品牌手机的类, ...