problem with loading local image in react js

Question

I'm having trouble showing an image using div in react js. the path is correct because I can display it using an img tag.

I can't use the import method because the filename is going to be taken from a database table.

this is my code: (Sandbox)

App.js

import "./styles.css";
import Test from "./components/Test";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Test />
    </div>
  );
}

./components/Test.js

import img1 from "../assets/images/sandwich.jpg";

const Test = () => {
  return (
    <div>
      <p>This uses the img tag</p>
      <img
        src={img1}
        style={{ width: "100px", height: "100px" }}
        alt="an img tag"
      />
      <p>And this uses a div with backgroundImage</p>
      <div
        style={{
          backgroundImage: `url("../assets/images/sandwich.jpg")`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "200px",
          height: "200px",
          border: "1px solid black"
        }}
      ></div>
    </div>
  );
};

export default Test;

MegaMindTheCoder · Accepted Answer · 2022-10-30 17:48:17Z

Thank you for giving us a sandbox to test. Was really helpful.

INSTEAD OF WRITING YOUR CODE LIKE THIS:

import img1 from "../assets/images/sandwich.jpg";

const Test = () => {
  return (
    <div>
      <p>This uses the img tag</p>
      <img
        src={img1}
        style={{ width: "100px", height: "100px" }}
        alt="an img tag"
      />
      <p>And this uses a div with backgroundImage</p>
      <div
        style={{
          backgroundImage: `url("../assets/images/sandwich.jpg")`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "200px",
          height: "200px",
          border: "1px solid black"
        }}
      ></div>
    </div>
  );
};

export default Test;

WRITE YOUR CODE LIKE THIS:

import img1 from "../assets/images/sandwich.jpg";

const Test = () => {
  return (
    <div>
      <p>This uses the img tag</p>
      <img
        src={img1}
        style={{ width: "100px", height: "100px" }}
        alt="an img tag"
      />
      <p>And this uses a div with backgroundImage</p>
      <div
        style={{
          backgroundImage: `url(${img1})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "200px",
          height: "200px",
          border: "1px solid black"
        }}
      ></div>
    </div>
  );
};

export default Test;

The difference is that you don't write your backgroundImage property like this:

backgroundImage: `url("../assets/images/sandwich.jpg")`,

You write it like this:

backgroundImage: `url(${img1})`,

but I can't use the import method because the filename will be taken from a database. I only added the img1 because it works for the img tag.
I am sorry. I have never worked with mysql. I thought the question was about an image not displaying on a div. Sorry for also not understanding that you don't want to use the import method
no problem. thank you for taking the time to respond to my question. btw I've found the solution and posted it as an answer if anyone is interested.

Shreyansh Gupta · Accepted Answer · 2022-10-30 18:03:55Z

0

as img1 will contain a react generated link for your image in assets folder you should use img1 as a link in url of the background image as

{
// ...
backgroundImage: `url(${img1})`,
// ...

answered Oct 30, 2022 at 18:03

Shreyansh Gupta

4252 silver badges11 bronze badges

Comments

dapidmini · Accepted Answer · 2022-10-30 18:18:17Z

-1

after watching this video I tried using require like this and it works wonderfully. I hope this can help other people who are stuck with this problem.

const Test = () => {
  const img2 = require('../assets/images/sandwich.jpg');
  // or if this doesn't work, try adding .default after require
  // so it will be require('../assets/images/sandwich.jpg').default
  ..
  <div style={{
    backgroundImage:`url(${img2})`
  ..

answered Oct 30, 2022 at 18:18

dapidmini

1,6433 gold badges33 silver badges62 bronze badges

Collectives™ on Stack Overflow

problem with loading local image in react js

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related