背景图像未在构建 React 上显示答案

【问题标题】：Background Image not showing on build React背景图像未在构建 React 上显示
【发布时间】：2020-12-16 16:53:12
【问题描述】：

我有一个结构如下的组件：

我的文件夹结构如下：

现在，当我在本地运行时，图像背景可以正确显示。 但是当我在线构建和部署时，图像没有显示出来。

有趣的是，图标加载没有问题，我以同样的方式引用它们

你们中有人知道为什么会发生这种情况吗？

谢谢

【问题讨论】：

【解决方案1】：

你可以试试这个

Import loginImageFrom "src/assets/images/loginImage.png";

<div style={{ backgroundImage: `url(${loginImage})`,backgroundSize: 'cover' }}>

【讨论】：

【解决方案2】：

如果你使用 react，模式是使用 import 语句而不是 require。根据您的 Webpack 配置，您可能无法使用内联 require。

“动态导入使静态分析器无法确定是否实际调用了导入的代码。

... ES2015 模块规范的作者在导入规范中解决了这个问题。他们通过禁止动态使用导入来做到这一点。这是无效的 javascript:"

CreateReactApp 文档还指定使用 import 语句。文档链接如下

import loginImage from "src/asets/images/loginImg.png"

<div style={{ backgroundImage: `url(${loginImage})`, backgroundSize: 'cover' }}>

【讨论】：