使用 React 内联样式设置动态 backgroundImage

Question

我是 React 新手，如果有人可以提供帮助，我将不胜感激......

我使用“create-react-app”设置环境，所有图像文件都在src文件夹下的img文件夹中。组件之一动态设置背景图像。

这很好用：

<div style={{ background: `url(${require("../img/file-name.jpg")}) no-repeat`}}/>

但是，当我尝试使用变量作为文件名时（如下所示），我收到错误：错误：找不到模块'../img/file-name.jpg'强>

let imageUrl = '../img/' + filenames[0];

...

<div style={{ background: `url(${require(imageUrl)}) no-repeat`}}/>

我也尝试过类似下面的测试，但我得到了同样的错误。

let imageUrl = '../img/file-name.jpg';

...

<div style={{ background: `url(${require(imageUrl)}) no-repeat`}}/>

如果有人可以提供帮助，我将不胜感激！谢谢！

Answer 1

有很多类似的问题，所以我不会重复我自己，要理解为什么这段代码不起作用，你应该研究一下 Webpack 是如何工作的。

一个选项是将图像移动到静态文件夹，这个 sn-p 是有效的：

const imageUrl = 'static/img/file-name.jpg';
<div style={{ background: `url(${require(imageUrl)}) no-repeat`}}/>

如果你想从src文件夹中导入，你必须提前导入if（由于webpack，文件url在构建时被解析）。

// or use require, doesn't metter
import img1 from '../img/cat.jpg';
import img2 from '../img/dog.jpg';

const imageURL = filenames[0] === cat ? img1 : img2;
<div style={{ background: `url(${imageURL}) no-repeat`}}/>