如何加载图像而不将其导入没有cra的webpack中？

问题描述

在CRA环境中，我可以轻松地将图像放置在公用文件夹中并进行动态链接。

https://create-react-app.dev/docs/using-the-public-folder#when-to-use-the-public-folder

这在CRA中效果很好，但是我很难在Webpack设置中重现此行为。

我有html loader和这个：

{
  test: /\.(svg|png|jpg|gif)$/,use: {
     loader: "file-loader",options: {
     name: "[name].[hash].[ext]",outputPath: "imgs",},}

您对React团队如何设置或如何重现行为有任何想法吗？

我基本上需要使用pojo通过JS创建HTML：

{
    "description": "Capitalize on low hanging fruit to identify a ballpark. Override the digital divide with additional clickthroughs from DevOps.","image": "/assets/1.png","video": "https://www.youtube.com/watch?v=L6r_51rAJEk","name": "John Doe","position": "Owner and Manager","company": "Tampa Dental Solutions"
}

那变成：

const testimonialCards = testimonials.map(({image,description,name,position,company}) => {
        return /*html*/`
            <div className="testimonial-card">
                <img class="testimonial-card__image" src="${process.env.PUBLIC_URL}/1.png" />
                <p className="testimonial-card__text">${description}</p>
                <div className="testimonial-card__infos">
                    <span className="testimonial-card__name">${name}</span>
                    <span className="testimonial-card__position">${position}</span>
                    <span className="testimonial-card__company">${company}</span>
                </div>
            </div>
        `
    })
    testimonialContainer.innerHTML = testimonialCards.join('')

感谢很多开发人员！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）