无法在反应应用程序中动态加载图像答案

【问题标题】：Unable to load images dynamically in react app无法在反应应用程序中动态加载图像
【发布时间】：2020-12-19 18:55:08
【问题描述】：

我有这个组件：-

const CollectionItem = ({ item }) => (
    <div className='collection-item'>
        <div
            className='image'
            style={{
                backgroundImage: `url(${item.imageUrl})`
            }} />
        </div>
    </div>
)

我的图片网址类似于 ../../assets/images/imageName.jpg

我已经尝试在与该组件相关联的 css 文件中使用该确切 url 加载图像。它正在使用 css，但不适用于 jsx。请帮忙。

【问题讨论】：

create-react-app.dev/docs/adding-images-fonts-and-files

标签： reactjs

【解决方案1】：

一般情况下，react 中加载图片的方式是从指定文件夹导入图片（webpack 在后台将其转换为正确的源），然后将导入的变量用作图片的src。

import imgSource from "../../assets/images/imageName.jpg";

const CollectionItem = ({ item }) => (
    <div className='collection-item'>
        <div
            className='image'
            style={{
                backgroundImage: `url(${imgSource})`
            }} />
        </div>
    </div>
)

编辑在导入依赖于道具的情况下，您可以简单地在函数本身内动态导入图像：

const CollectionItem = ({ item }) => (
    import imgSource from `${item.imageUrl}`;
    <div className='collection-item'>
        <div
            className='image'
            style={{
                backgroundImage: `url(${imgSource})`
            }} />
        </div>
    </div>
)

如果不起作用，可以尝试改用require

const imgSource = require(item.imageUrl);

【讨论】：

那我如何使我的导入动态化？
你可以只使用动态导入，我会用它来编辑我的答案
require 语法做到了！！！太感谢了。我希望我能多次投票