为 ReactJS 应用程序导入图像的问题

Question

使用 create-react-app 和 tailwindcss 创建了一个应用。我正在尝试在我的网站中显示本地图像。我在 src 中创建了这个文件夹结构：assets/media/images/profile.jpg。图像不显示在浏览器中。这就是我正在做的事情。

这是src/components/Hero.js中的组件：

import ImageOne from '../assets/media/images/profile.jpg';

const Hero = () => {
return (
    <div className="bg-white h-screen flex flex-col justify-center items-center">
        <h1 className="lg:text-9xl md:text-7xl sm:text-5xl text-3xl font-black mb-14">
            Text
        </h1>

        <img class="rounded" src={ImageOne} alt='Profile'/>
        
    </div>
)
}

export default Hero

图像根本不显示。这是浏览器正在加载的内容：<img class="rounded" src="/static/media/profile.ba8339ef.jpg" alt="Profile">

其他 stackoberflow 答案，如 React won't load local images，对我没有帮助。

Answer 1

仔细检查顺风指南中的所有说明，确保将 react-scripts start 替换为 craco start：

https://tailwindcss.com/docs/guides/create-react-app

同时，看看这个示例存储库：

https://github.com/oieduardorabelo/2021-03-18-tailwindcss-and-create-react-app

我创建了一个 assets/media/images/profile.jpg 和 src/components/Hero.js 与您在此处共享的相同 sn-p，它工作正常?

Answer 2

将图片文件夹从 src/assets/media/ 移动到 public/ 并添加：

<img class="rounded" src={process.env.PUBLIC_URL + '/images/profile.jpg'} alt='Profile'/>