使用React内联样式设置动态背景图片

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`}}/>

我很感激如果有人能帮忙解决!! 谢谢!

- takuma

---

这是因为 require 使用路径，当你分离路径时，required 会读取该值，但它会将其视为字符串并将 .. 或 ./ 包含在其中作为字符串字符而不是路径分隔符。 - MubashirEbad

Answer 1

有很多类似的问题，因此我不会重复自己。要理解为什么这段代码无法工作，您应该研究一下Webpack的工作原理。

一个选项是将图像移动到静态文件夹中，这段代码是有效的：

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`}}/>

- Dennis Vash

---

非常感谢！我最终使用了静态文件夹。 - takuma