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

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

1. 问题背景

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

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

React中使用路径别名引用资源设置背景图_第1张图片

2. 解决方案

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

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

React中使用路径别名引用资源设置背景图_第2张图片

你可能感兴趣的:(react.js,javascript,ecmascript)