首页 > 解决方案 > React 将背景 url 转换为 base64 图像

问题描述

我是 React 新手,现在我在项目中使用 SCSS 和 React 最新版本。在我的 SCSS 文件中,我有

display: flex;
flex-direction: column;
justify-content: space-between;
background: url(../../assets/img/comp-img/game-box-bg.png) no-repeat 100% 100%;

myComponent.jsx 使用已安装的 node-sass 包导入此 SCSS 文件。问题是当我检查元素时,我在浏览器中看到了这个结果:

background-image: url(data:image/png;base64,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

为什么 React 会自动将图像 url 转换为 base 64???

我做错了什么??

标签: javascriptreactjs

解决方案


推荐阅读