Reactjs 无法在react应用程序中动态加载图像

我有这个部分：-

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

const CollectionItem=（{item}）=>(
)

我的图像URL类似于.././assets/images/imageName.jpg

---

我已经尝试过在css文件中加载一个与这个组件相关的图像，并使用这个确切的url。它使用css，但不使用jsx。请提供帮助。

通常，在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>
)

const imgSource = require(item.imageUrl);