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

Posted 2023-03-07

【中文标题】为 ReactJS 应用程序导入图像的问题

【英文标题】：Issues with importing images for ReactJS App

【发布时间】：2021-06-15 05:32:01

【问题描述】：

使用 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，对我没有帮助。

【参考方案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，它工作正常?

【讨论】：

我一直在关注本教程，因为我是这些技术的新手：youtube.com/…，我还没有使用过craco start。在 package.json, scripts 中，我的开始是这样的："start": "npm run watch:css && react-scripts start"，watch 是："watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"

实现了你的建议，没有运气。拉了github repo，我发现问题出在我正在导入的实际文件上:)

【参考方案2】：

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

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

【讨论】：

不幸的是，这不起作用。这是浏览器加载的<img class="rounded" src="/images/profile.jpg" alt="Profile">。没有图像仍然显示。

@BogdanAndrei 我不知道 Tailwind，你应该尝试 oieduardobelo 的解决方案，它似乎是正确的。看这里 -> blog.logrocket.com/create-react-app-and-tailwindcss 和 dev.to/shaan71845/…