CodeSandbox.io <img>тег не загружается изображение

Question

Я пытался добавить изображение, используя <img> tag на CodeSandbox.io. Тем не менее, каждый раз, когда я пытаюсь добавить его, он не отображается и просто по умолчанию использует тег alt (Displays Mountain).

Я пытаюсь загрузить изображение в той же папке, что и файл в который содержится в этом JS файле.

Ниже приведен код, который генерирует HTML

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img src="business-landing-page-template-with-photo_52683-19539.jpg" alt="Mountain"/>
      </div>
    </navbar>
  )

Может кто-нибудь подскажите, пожалуйста, как получить изображение для загрузки.

Answer 1

Если в папке publi c, используйте относительный путь к файлу, то есть src/img/image.jpg, в противном случае, если исходное изображение находится в каталогах компонентов, вы используете require и относительный путь:

Данный компонент в src/components, а изображение в src/img

function Navbar() {
  return (
    <navbar className="navbar">
      <div>
        <img
          src={require("../img/business-landing-page-template-with-photo_52683-19539.jpg")}
          alt="Mountain"
        />
        // or in public
        <img
          src="src/img/business-landing-page-template-with-photo_52683-19539.jpg"
          alt="cat"
        />
      </div>
    </navbar>
  )
}