Как отобразить картинки с бд mysql в теге img (текстовые данные я спокойно беру, но с изображениями проблема)?

Question

[danila_prokopenko]

Изображения я храню на локальной папке клиента img.

Данные о изображении в бд.
Как вытащить картинку из папки img по названию из бд? и вставить вот таким способом?
но уже из бд беря название
текст я спокойно выношу, а с картинками не знаю.

const OurTours = () => {
  const [planets, setPlanet] = useState([]);

  useEffect(() => {
    async function loadPlanets() {
      const result = await axios.get("http://localhost:4000/api/get");
      setPlanet(result.data);
      console.log("Стейт planet", result.data)
    }
    loadPlanets()
  }, []);

  return (
    <div className="content">
      <div className="wrapper">
        <div className="main-content">
          <div className="container">
            <Heading />

            {planets.map((planet, index) => (
              <div className="planet-cart">
                <div className="information">
                  <div className="under-text">
                    {planet.name}

                  </div>
                  <div className="bottom-text">
                    {planet.shot_discription}
                  </div>

                  <div className="button-for-cart-planet">
                    <div className="text-for-button">
                      <Link to={`/planet/${planet.id}`}>
                        Отправиться
                    </Link>
                    </div>
                  </div>
                </div>
                <div className="planeta">
                  <img src="../../img/planets_image/mars.png" alt="" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

На php делал, а тут тупик.
Картинки я знаю, импортируются из папок по названиям, но как это применить и как вообще реализовать выдачу изображений из бд я не знаю?

Answer 1

[Steppp]

У тебя проект запускается в папке public. Там же и лежит index.html. Вот от него и ищи фотографии

<img src={("./planets_image/" + planet.planet_image + ".png")} alt="" />

Comments

[danila_prokopenko]

сделал, как вы сказали, путь не ищет
а если добавтиь require, то

<img src={require("./planets_image/" + planet.planet_image + ".png")} alt="" />

[Steppp]

danila_prokopenko, Фотографии же в папке public? Надо их туда положить

попробуй просто загрузить фотку
<img src="./planets_image/img.png" alt="" />
И так

<img src={`./planets_image/${planet.planet_image}.png`} alt="" />

[Steppp]

Так в первом варианте у вас вроде как нет папки с фотками! Или высоты у фотки нет!
Надо смотреть подгрузились ли фотки в коде эл
А может такой фотки нет

[danila_prokopenko]

Steppp,
картинки в паблик, вот ошибка с require (выше код)
а если без require, то

<img src={("../../../public/planets_image/mars.png")} alt="" />

и если<img src={("./planets_image/mars.png")} alt="" />