react中css里面 class中的 图片的相对地址 完美解决 backgroundImage
发现问题:缓存
之前react的图片,也在style里面,也无所谓。
刚做了一个输入框,change的时候改变图片,每次都刷新图片,关键是没缓存,这哪受得了
之前用的:
网上搜索各种插件,替换什么的,都不好使。
最后的解决方案:
- 将css文件,放到 public下,然后就变成公共资源,也不参与打包,也就不会报错了。
- 将index.html中加入
<link rel="stylesheet" href="./assets/css/searchList.css" />
- class的全局属性就能用了,解决了图片的相对路径的问题。
backgroundImage: "url('./assets/images/searchBottomBg" + bgNum + ".jpg')",
.searchListBg1 {
background-image: url('../images/searchBottomBg1.jpg');
}
react中css里面 class中的 图片的相对地址 完美解决 backgroundImage的更多相关文章
- 关于页面中css某些情况下出现不知原因的隔断解决办法
第一种方法:body{margin:0px;padding:0px position:absolute; top:0px;left:0px;} html{ width:100%; overflow-x ...
- ASP.NET中引用dll“找不到指定模块"的完美解决办法 z
DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL导出的函数的必要调用信息.DllImport属性应用于方法,要求最少要 ...
- PyQt5在QWidget窗体中显示Qwidget的自定义类(补:完美解决)
[概览] 1.显示原生Qwidget 1)不使用布局(绝对定位) 2)使用布局 2.显示Qwidget的自定义类 1)不使用布局(绝对定位) 2)使用布局 [知识点] 1.显示原生Qwid ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
- React中css的使用
网页的布局.颜色.形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样.ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异.ReactJs中Css文件本身的编写 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)
之前写了一篇vue文件怎么使用的文章,有人问我怎么在css文件中使用public下的文件,这是个好问题,因为我之前都没有研究过 需要解决的2个问题 一开始按照vue文件的使用方式(https://ww ...
- tp3.2替换模板中如果需要替换的图片在css样式表中怎么办?
因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...
- CSS从大图中抠取小图完整教程(background-position应用)
CSS从大图中抠取小图完整教程(background-position应用) 转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...
随机推荐
- 5.14 汇编语言:仿写Switch选择结构
选择结构,也称为switch语句,是计算机编程中的一种控制结构,用于根据表达式的值选择不同的执行路径.它允许程序根据表达式的值来决定执行哪个代码块,从而实现多分支选择逻辑.switch语句由一个表达式 ...
- C# 通过VMI接口获取硬件ID
使用C#语言实现通过VMI(虚拟机监控器)接口来获取硬件ID的过程.VMI是一种用于虚拟化环境的接口,用于管理虚拟机和宿主机之间的通信和资源共享.具体实现中,需要通过添加System.Manageme ...
- Linux文件IO之二 [补档-2023-07-21]
8-5 linux系统IO函数: open函数: 函数原型:int open(const char *pathname, int flags, mode_t mode); 功能:打开一个文件并 ...
- navicat破解(15以前的版本)
navicat破解各种不成功,很耽误事.所以,再次整理一个相对省事有效的办法.内容如下: 一:下载此激活工具 二:按下图生成激活码 1. 2. 点击手动激活 3. 将请求码按图粘贴,按图点击操作便可激 ...
- 深入浅出Java多线程(八):volatile
引言 大家好,我是你们的老伙计秀才!今天带来的是[深入浅出Java多线程]系列的第八篇内容:volatile.大家觉得有用请点赞,喜欢请关注!秀才在此谢过大家了!!! 在当今的软件开发领域,多线程编程 ...
- Kubernetes 1.26.0实战:在本地配置k8s集群
阶段一:开发环境及版本 以下环境均来自官网: 本地宿主机环境:Windows 10 21H2 64位 虚拟机软件:VMware workstation 15.5 pro 虚拟机镜像版本:ubuntu- ...
- CF1348
传送门 A: 一个组 \(2^n+2^1+\dots+2^{\frac{n}{2}-1}\),另一个组剩下的. B: 考虑不停循环. 如果不同的数字超过 \(k\),无解. 否则先把原序列去重,然后把 ...
- 回顾复习之背包DP
\(\small{(本文统一将c[i]视作cost,w[i]视作worth,下面的代码用这两个变量表示费用和价值)}\) \(\Large\textbf{1. 01背包}\) \(\large\tex ...
- 【Unity3D】广告牌特效
1 前言 广告牌特效是指:空间中的一个 2D 对象始终(或尽可能)面向相机,使得用户能够尽可能看清楚该 2D 物体.广告牌特效一共有以下 3 种: 正视广告牌:广告牌始终以正视图姿态面向相机,即广 ...
- Linux实现指定用户sftp传输,静止ssh登录
1.环境 名称 ip server 192.168.1.1 client 192.168.1.2 2.服务器创建repl用户 useradd -m -d /home/repl -s /usr/sbin ...