Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React image not showing

I was creating a React page but when I added background image using TailwindCSS, an error got displayed, and I could not get rid of it even though I changed that background tag. Help please….

Code

import React from "react";
import Button from "../Layout/Button";

function Banner () {
  return (
    <div className="min-h-screen flex flex-row justify-between items-center lg:px-32 px-5 relative bg-[url('/images/here.jpg')] bg-cover bg-no-repeat pt-20">
      {/* Black transparent overlay */}
      <div className="absolute inset-0 bg-black bg-opacity-50"></div>

      {/* Content that goes over the overlay */}
      <div className="w-full lg:w-2/3 space-y-5 relative p-10 z-10">
        <h1 className="text-white font-semibold text-6xl">
          Elevate your inner foodie with every bite
        </h1>
        <p className="text-white">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur sit
          rerum et itaque. Voluptates modi molestiae corporis quas voluptatum
          debitis laudantium ut ex, praesentium, facilis qui illo sequi!
          Accusamus, harum.
        </p>
        <div>
          <Button title="ORDER NOW" />
        </div>
      </div>
    </div>
  );
}

export default Banner;

Tailwind config

My Tailwind CSS config

Directory

directory

Error

eror

Output

output

Tags:

2

Answers


  1. 0

    Move the Image to the public Folder

    public/
 └── images/
     └── here.jpg

    Then, update your code to-

    <div className="min-h-screen flex flex-row justify-between items-center lg:px-32 px-5 relative bg-[url('/images/here.jpg')] bg-cover bg-no-repeat pt-20">
    Login or Signup to reply.
  2. 0

    If you want to use Image in another path other then public, you can import it, like this:

    import python from '../assets/python.png'

    and use name you imported that with to use it:

    <img src={python}/>

    if not so, you should put it in public folder and use it directly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search