@danila_prokopenko

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

Изображения я храню на локальной папке клиента img. zTuU21aLbyo.jpg?size=429x568&quality=96&sign=14f896fc207d3dafdf3be88730c4c434&type=album

Данные о изображении в бд. ilKr3ZGY3h0.jpg?size=1513x110&quality=96&sign=aabc8d40779313a6cd0290266ecf4759&type=album
Как вытащить картинку из папки img по названию из бд? и вставить вот таким способом? H8rmBkHVzoc.jpg?size=463x59&quality=96&sign=f1723875892db446abb8daedb39de28f&type=album
но уже из бд беря название
текст я спокойно выношу, а с картинками не знаю.
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 делал, а тут тупик.
Картинки я знаю, импортируются из папок по названиям, но как это применить и как вообще реализовать выдачу изображений из бд я не знаю?
  • Вопрос задан
  • 74 просмотра
Пригласить эксперта
Ответы на вопрос 2
udjin123
@udjin123
PHP, Golang, React
Вариант два. Формируете абсолютный путь на бэкэнде к картинке и отдаете React или отдаете только название, а в React соответственно

<img src={"/img/planets_image/" + planet.img + ".png"} alt="" />
Ответ написан
@Steppp
У тебя проект запускается в папке public. Там же и лежит index.html. Вот от него и ищи фотографии

<img src={("./planets_image/" + planet.planet_image + ".png")} alt="" />
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы