problem with loading local image in react js-CodePudding

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;

CodePudding user response：

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})`,

CodePudding user response：

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})`,
// ...

CodePudding user response：

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})`
  ..