CODEWITHSUNDEEP
reactjstailwind-css
Bogdan Andrei
Bogdan Andrei

Reputation: 105

Issues with importing images for ReactJS App

Created an app with create-react-app and tailwindcss. I am trying to display local images in my website. I created this folder structure in src: assets/media/images/profile.jpg. The image is not displayed in browser. Here's what I am doing.

Here's the component in 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

The image is simply not displayed. Here's what the browser is loading: <img class="rounded" src="/static/media/profile.ba8339ef.jpg" alt="Profile">

Other stackoberflow answers, like React won't load local images, did not help me.

Upvotes: 2

Views: 3238

Answers (2)

oieduardorabelo
oieduardorabelo

Reputation: 2985

double-check all instructions in the tailwind guide, make sure you replaced react-scripts start by craco start:

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

in the meantime, have a look at this example repository:

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

I created an assets/media/images/profile.jpg and src/components/Hero.js with the same snippet you shared here, and it is working correctly 🚀

Upvotes: 2

MB_
MB_

Reputation: 1747

Move your images folder from src/assets/media/ to public/ and add :

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

Upvotes: 2

Related Questions