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

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

Answer 1

有很多类似的问题，所以我不再重复，要理解为什么这段代码不起作用，您应该研究 Webpack 的工作原理。

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

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

如果你想从 src 文件夹导入，你必须事先导入（由于 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`}}/>

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

Setting a dynamic backgroundImage With React inline styles

inline

require

reactjs