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

Question

Gabriel

react

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

Как можно по-другому загрузить картинку в компоненте, указав путь относительно корня проекта? Неудобно использовать длинные относительные пути типа ../../../../../img-1.jpg. Как можно упростить этот процесс? Вот пример кода: 

```jsx
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>
  );
}
```

28 декабря 2023 г. 16:47

Ответы на вопрос 2

Похожие вопросы

Answer 1

Путь относительно корня не может быть использован в React компоненте, потому что React компилирует все файлы JavaScript и CSS в один минифицированный файл, и пути относительно корня проекта изменяются после компиляции.

Чтобы загрузить картинку в компоненте React, можно воспользоваться модульной системой ES6 импорта. 

1. Перенесите изображение в папку с компонентами, например, "src/components/images".
2. Возьмите путь относительно папки с текущим компонентом и импортируйте изображение в компонент:

```jsx
import React from "react";
import backgroundImage from "./images/gradient.png";
import "./Content.css";

export default function Content() {
  return (
    <div className="head-block-content__gradient">
      <div className="head-block-content__gradient--img">
        <img src={backgroundImage} alt="фон" />
      </div>
    </div>
  );
}
```

Теперь вы можете использовать переменную `backgroundImage` вместо длинного относительного пути.

Этот подход упрощает процесс загрузки изображений и сделает код более читаемым.

Answer 2

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