css - Why is my image not loading even though the code is correct?

Question

there is no compile errors and my pages load. However, my images don't display when they're called using CSS. Example below. From doing research, I saw something about a web pack but I tried to install file loader NPM and it didn't work. Thank you!

No compile errors

<Img src={img} alt={alt} />

img: require("../../imgs/platform.jpg").default

another example where it don't work.

export const ContentOne = {
  BGLight: false,
  lightTopLine: true,
  TextPoint: true,
  TitleMain: "SECURE APP",
  description:
    "Group 35’s project works towards solving the zero hunger owards solving the zero hunger SGGS because, our group will design and develop a full stack web-based application that enables kdkdd djkjdkdjf ekjejkkj skfjjskf SGGS because, our group will design and develop a full stack web-based application that enables owards solving the zero hunger SGGS because, our group will design and owards solving the zero hunger SGGS because, our group will design and develop a full stack web-based application that enables  develop a full stack web-based application that enables restaurants, supermarkets and food banks to effectively communicate to not waste food. Therefore, with this effective communication tool, homeless people will have an increased chance in not going hungry and missing meals.  ",
  img: require("../../imgs/genericbackground.jpg").default,
  alt: "img",
  TextPointDesc: true,
};

question from:https://stackoverflow.com/questions/65947694/why-is-my-image-not-loading-even-though-the-code-is-correct

Answer 1

Try just importing it instead?

Heres an example you might be able to use for your content array:

https://codesandbox.io/s/compassionate-ellis-qitz4?file=/src/App.js

import img from "./img/img.jpg"
//const img = require("./img/img.jpg")
const App = () => {
  return  (
    <Img src={img} alt={alt} />
  )

}