How to display pictures from the mysql database in the img tag (I can easily take text data, but there is a problem with images)?

Question

React

I store the images on the client's local img folder.

Image data in database.
How to pull an image from the img folder by name from the database? and insert like this?
but already from the database, taking the name of
the text, I calmly endure it, but I don’t know about the pictures.

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

I did it in php, but here is a dead end.
Pictures, I know, are imported from folders by name, but I don’t know how to apply it and how to implement the issuance of images from the database at all?

Answer 1

Your project is running in the public folder. Index.html is also there. Look for photos from him

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