Почему путь относительно корня не работает в react компоненте?

Question

[DZHAMBUALT]

Здрасте. Возможно задаю глупый вопрос, но у меня не получается загрузить картинку в компоненте при указании пути относительно корня проекта. Что с этим делать? Пользоваться вот такими конструкциями ../../../../../img-1.jpg не слишком удобно.

import "./Content.css";

export default function Content() {
  return (
      <div className="head-block-content__gradient">
        <div className="head-block-content__gradient--img">
          <img src="/src/ASSETS/IMG/IMAGES/HEAD/gradient.png" alt="фон" />
        </div>
      </div>
  );
}

Answer 1

[Александр]

Вариант первый:
import image from 'path/to/my/image.png';
<img src={image} alt="" />

Вариант второй:
Кладете картинку (-и) в public и указываете абсолютный путь до файла.

Answer 2

[historydev]

За такое дед мороз принесёт тебе палку.

Стили, скрипты и ассеты относящиеся к компоненту, должны находится в его папке и никак иначе.

Общие ресурсы выносятся в папку вроде shared.

Comments

[DZHAMBUALT]

а к этой общей папке обращаться только через ../../../img-1.jpg?

[historydev]

DZHAMBUALT,

Пожалуйста.

https://www.google.com/search?q=react+project+stru...

[Александр]

historydev, а на FSD тоже ссылку можно было приложить.

[historydev]

Александр,

Я не в теме корпоративных жуков,.

Пробежался, это гениально, silces - слайсы.

Даже в гошке срезы по человечески переводят)

На этом пожалуй всё :)