小编tak*_*uma的帖子

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

我是 React 新手,如果有人能提供帮助,我将不胜感激......

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

这工作正常:

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

但是,当我尝试使用变量作为文件名(如下所示)时,出现错误:错误:找不到模块“../img/file-name.jpg”

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

...

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

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

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

...

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

如果有人可以提供帮助,我将不胜感激!谢谢你!

inline require reactjs

4
推荐指数
1
解决办法
3702
查看次数

标签 统计

inline ×1

reactjs ×1

require ×1