React中使用路径别名引用资源设置背景图

最新推荐文章于 2024-02-23 15:36:59 发布

ByeByeWorld02

最新推荐文章于 2024-02-23 15:36:59 发布

阅读量195

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_66681776/article/details/134362906

版权

为了解决url进行路径别名引入问题，采取base64编码的方式

1. 问题背景

在react中使用css-in-js为元素添加背景图会产生奇怪的bug

const navLogoBgi: CSSProperties = {
	backgroundImage: `url(@/assets/images/nav.png)`
}

在这里插入图片描述

2. 解决方案

先路径别名引入资源，再拼接字符串。但是这样是使用了base64编码，是一种取巧的方式

import PngNav from "@/assets/images/nav.png";
const navLogoBgi: CSSProperties = {
	backgroundImage: `url(${PngNav})`
}

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ByeByeWorld02

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React中使用路径别名引用资源设置背景图

。
复制链接

扫一扫

react引用本地图片

weixin_44537264的博客

05-15

446

第一种导入图片路径 import Img from “./images/1.png” <img src={Img} alt=""/> 第二种直接获取图片 <img src={require("./images/1.png")} alt=""/> 如果是背景图的话操作style style={{background:url(${require("./images/...

React中jquery引用的实现方法

10-19

虽然可以直接在React中使用jQuery，但更推荐的做法是将jQuery用于复杂的选择和动画，而让React处理组件状态和渲染。如果需要操作DOM，可以考虑使用`ReactDOM.findDOMNode()`（对于旧版本的React）或`ref`属性来获取...

参与评论您还未登录，请先登录后发表或查看评论

React 通过style来设置背景图片。

技术分享

12-17

9981

React中，给元素设置样式主要有两种，一，引入CSS文件这种不用多说，通过 import import '../views/css/bases.css'; 这种方式适合，样式比较复杂，多的情况。二，设置元素的 style <main type="lock" style={{ color: 'rgba(0,0,0,.25)' }}> </main&gt...

react 设置背景图片（等比例显示，不拉伸）

hero_th的博客

09-01

3228

js 代码部分 <div className={styles.img_box} > <div className={styles.img} style={{backgroundImage: `url(${this.state.url})`}} /> </div> less 代码部分 .img_box{ width: 100%; height: 610px; .img{ width: 100%; height: 1

如何在React.js文件中设置标签的背景图片

qq_41619265的博客

06-22

385

如何在js文件中设置标签元素背景图片

React 当中如何动态引入本地背景图片

热门推荐

AliceWu的博客

07-16

2万+

1、在webpack.config中找到相应的图片路径的缩写配置（不是所有的项目都有缩写配置的，在大型项目中为了书写方便进行缩写配置） 2、接下来就要说引入图片的方式了如果不是背景图片的话，有以下两种方式 ①直接在内部引用 ②使用import方法 import img from 'Image/weixin_erweima.png' //引入图片的路径 &amp;amp;amp;amp;lt;img ...

react-blur：React组件使用画布模糊图像背景

02-05

React组件，用于使用画布创建模糊的背景。安装 npm install react - blur -- save 用法 var Blur = require ( 'react-blur' ) ; 例 The content. 有关完整示例，请参见的代码。道具 img ：图像路径。 ...

在React 组件中使用Echarts的示例代码

08-28

React 中使用 Echarts 的示例代码在 React 组件中使用 Echarts 的示例代码是非常重要的，特别是在需要可视化数据的时候。Echarts 是一个功能强大且灵活的数据可视化库，它提供了多种类型的图表，包括柱状图、折线...

基于react项目打包css引用路径错误解决方案

01-18

没有去修改create-react-app默认的配置文件执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问这样放在服务器目录就访问不到了报错为手动更改index.html的路径之后又报静态...

react-native-bgimage:React Native的背景图片

04-27

React本机背景图像 React Native的背景图片以最优化的方式在平铺模式（重复的背景）下渲染您的android res / drawable *图像。安装将您的图片放在drawables目录中： android / app / src / main / res / drawable...

React 配置路径别名

dhp1994的博客

10-29

4. 别名路径提示。项目根目录下新建文件。2. 在项目根目录下新建文件。

react 中 background-image引用

miin_ying的博客

07-01

3030

能用的代码就是好代码之-background-image的引入

react动态添加背景图片/不同内容添加对应背景

前端小白的学习分享小世界

07-16

2593

根据内容动态添加相应背景图片

react项目导入背景图片显示background-image: url([object Module])

qq_37832645的博客

03-31

2896

尝试了配置file-loader无果最后发现直接在导入图片的路径后面加上.default就可以了 background-image: url(${require('@/assets/img/sprite_01.png').default});

React 中插入图片的三种方式

Ydesk116的博客

07-18

4865

React中插入图片的几种基础方式

react style 设置背景图片

peter的博客

09-29

2123

快速搞定 <div style={{backgroundImage: "url(" + require("./images/bg.jpg") + ")"}}> </div>

react 组件添加背景图片

pugongyingyangyue的博客

09-12

6506

React div加载背景图

qq_36904182的博客

04-18

759

backgroundImage: `url(${ActivitiesBack})`

react中如何使用less设置样式

06-01

在 React 中使用 LESS 设置样式需要先安装相应的依赖包。可以使用 npm 或 yarn 安装依赖： ```bash npm install less less-loader --save-dev # 或者 yarn add less less-loader --dev ``` 安装完成后，在 webpack...