发现问题:缓存

之前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. 2.0 熟悉CheatEngine修改器

    Cheat Engine 一般简称为CE,它是一款功能强大的开源内存修改工具,其主要功能包括.内存扫描.十六进制编辑器.动态调试功能于一体,且该工具自身附带了脚本工具,可以用它很方便的生成自己的脚本窗 ...

  2. C# 中类与继承等概念

    C#是一种现代的.面向对象的编程语言,其中类和继承是面向对象编程语言中非常重要的概念,类和继承是C#中面向对象编程的基本概念,可以用于创建复杂的应用程序和模块,而多态和接口可以使程序更加灵活和可扩展. ...

  3. 股价暴跌11% 但是Intel的“王者归来”时刻不远了

    当地时间1月25日美国股市盘后,处理器大厂Intel公布了2023财年第四季(截至2023年12月30日为止)及2023财年全年的财报,虽然四季度业绩整体优于分析师的预期,但是2024年第一季的业绩指 ...

  4. 体验 ABP 的功能和服务

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. ABP是一个全栈开发框架,它在企业解决方案的各个方面都有许多构建模块.在前面三章中 ...

  5. 基于OpenEuler的信创国产瘦客户机软件系统 DoraOS

    DoraOS是一款瘦客户机系统软件,最新版本基于OpenEuler开发.可以将主机转化为专业的瘦客户机.目前支持x86架构的硬件. 软件下载地址为: https://www.doracloud.cn/ ...

  6. 7.函数的使用--《Python编程:从入门到实践》

    7.1 python 中函数的定义   python 中函数使用 def 定义: def greet_user(): 7.2 传参的传递   普通实参的传毒,可以与 C++ 相同,即按顺序传递. 7. ...

  7. .NET 云原生架构师训练营(模块二 基础巩固 MySQL环境准备)--学习笔记

    2.4.1 EF Core -- MySQL环境准备 安装 Docker 配置 docker 镜像仓库国内镜像地址 运行 mysql docker container 通过 Navicate 连接 安 ...

  8. 《ASP.NET Core 微服务实战》-- 读书笔记(第10章)

    第 10 章 应用和微服务安全 云应用意味着应用运行所在的基础设施无法掌控,因此安全不能再等到事后再考虑,也不能只是检查清单上毫无意义的复选框 由于安全与云原生应用密切相关,本章将讨论安全话题,并用示 ...

  9. 在.NET Core下的机器学习--学习笔记

    摘要 .NET Core 在机器学习的应用场景,除了 ML .NET 还会介绍一个非常棒的開源技術 TensorFlow .NET , Keras .NET. 讲师介绍 本课内容 人工智能介绍 ML ...

  10. 扩展说明: 指令微调 Llama 2

    这篇博客是一篇来自 Meta AI,关于指令微调 Llama 2 的扩展说明.旨在聚焦构建指令数据集,有了它,我们则可以使用自己的指令来微调 Llama 2 基础模型. 目标是构建一个能够基于输入内容 ...