Путь к изображению в React.js?

Question

[Влад]

Вроде бы как путь к атрибуту src должен быть основан на файловой архитектуре.
Чтобы не зависеть от маршрута, пытаюсь добраться к изображению через абсолютную ссылку.
В итоге по адресу `localhost:3000/components/Users/img/johnson.jpg` я получаю 404.
Почему так получается в React?

let { userName } = useParams();
/* ... */
<img src={`${window.location.origin}/components/Users/img/${userName}.jpg`} />

Answer 1

[Иван В]

Если картина лежит в "/components/Users/img/johnson.jpg" и вы хотите прописать к ней путь в компоненте Users, то напишите так

import johnsonImg from "./img/johnson.jpg"
...
<img src={johnsonImg} />

P.S. Нельзя заглянуть в содержимое src просто указав ссылку типа localhost:3000/src/components/foo/bar/example.file
Если нужны файлы с доступом по прямой ссылке, кладите их в папку "public".

Comments

[Влад]

Мда, React точно не для людей делали ))

[Влад]

Иван В, поместил изображение в папку с компонентом, делаю импорт и получаю ошибку:

Failed to compile.

./src/components/UserId/UserId.js
Module not found: Can't resolve './img/johnson.jpg' in 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId'

Что за ерунда?

[Иван В]

Влад,

поместил изображение в папку с компонентом

файл лежит в ./components/UserId/img/johnson.jpg или ./components/UserId/johnson.jpg ?

[Влад]

Он лежит в 'C:\OSPanel\domains\react-new-level\unit-03\src\components\UserId\img\johnson.jpg'

[Влад]

Сорри!!! Ввёл в заблуждение! Я неправильно назвал картинку. Всё получилось.
Я только начал изучать React. Вообще пока не понимаю что нужно класть в папку ./public
В Gulp и Webpack всегда одна папка для разработки, другая на продакшене у меня была. Всё было просто. Тут пока не въезжаю.

[Иван В]

Влад,
ну как минимум в public лежит index.html - входная точка твоего приложения.
В нее можно класть все файлы, которые нужны в работе приложения, но не используются в компонентах. Например, фавиконы, картинки для превью в соц сетях.

[Влад]

Иван В, Всё что я пытаюсь сделать, это передать в роуте в качестве параметра имя картинки и вывести её на экран вот таким вот образом:

import { useRouteMatch, Link, useParams } from 'react-router-dom';

function UserId() {
  let { userName } = useParams();
  let userNameСap = userName[0].toUpperCase() + userName.substring(1);
  let match = useRouteMatch();
  let usersLink = match.url.split('/')[1];
  let userNameImg = './img/' + useParams().userName +'.jpg';  // ИМПОРТ В КОМПОНЕНТЕ НЕ ДЕЛАЕТСЯ! КАК БЫТЬ???

  return (
    <>
      <div className="container">
        <h1>User: { userNameСap }</h1>
        <img src={ userNameImg } alt={ userNameСap }/>
        <Link to={ `/${usersLink}` }>Назад</Link>
      </div>
    </>
  );
}

export default UserId;

Пока не получается. Мне кажется это каким-то геморроем на пустом месте. На чистом JS или PHP через $_GET['imgname'] эта задача решается в считанные секунды!
Я правда 2-й день только React изучаю :))

[Иван В]

Влад, попробуй сделать проще
используй usehistory
с помощью этого хука получаешь доступ к history
а у него используешь метод goBack()

import { useHistory } from "react-router-dom";

const history = useHistory()

return (
  <button type="button" onClick={() => history.goBack()}>
    Go back
  </button>
);

[Влад]

Иван В, а что касается изображений? Поместить их в public?

Ладно, пойду читать что-то типа структурирования React-приложений.

[Иван В]

Влад, я на работе делаю так -
если изображение используется в разных компонентах, то в src создаю папку assets и в нее закидываю картинки.
если изображение используется в одном компоненте, то храню ее в папке с компонентом.

[Влад]

Иван В, так а как добраться до изображения, если ссылка на него передаётся как параметр в роуте? Ведь в функции компонента импорт делать нельзя.

[Иван В]

Влад, тут пара способов
1) тупо все закинуть в public
2) в компоненте сделать импорт всех картинок и написать функцию, которая получает имя и возвращает нужную картинку, что-то типа такого

import fooImg from "./img/foo.jpg"
import barImg from "./img/bar.jpg"

const getImg = (name) => {
 switch (name) 
    {
        case "foo": return fooImg;
        case "bar": return barImg; 
        ......
    }    
}

[Влад]

Иван В, понял. Первый пункт однозначно, так они будут заливаться на сервер с помощью бэка.

[frontedward]

это страшный костыль, но рабочий, у меня fsd pwa-проект с module.scss и выглядит этот костыль устрашающе, надеюсь потом исправлю этот момент