I need to take an image in React

Question

How can i take an images into React-component? My image is in srs/images. I try to take it by:

useEffect(() => {
  const fetchData = async() => {
    try {
      const response = await axios.get("http://127.0.0.1:5000/api/user", {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
        },
      });

      const {
        firstName,
        lastName,
        avatar
      } = response.data;
      setFirstName(firstName);
      setLastName(lastName);
      setAvatar(avatar);
    } catch (error) {
      console.error("Error fetching user data:", error);
    }
  };

  fetchData();
}, []);

my avatar looks like ../images/first_image.png and than i can't view it in

<img src={avatar}
    alt={"Avatar"}
    style={{marginLeft: "5%", width: "4vh"}}/>

in my postgres sql the image is like the path: ../images/four_image.png

your img seems fine and there's no problem on what you posted. So it might be a problem on how you import your image. — JkAlombro, May 25 '23 at 07:53
ow, I just noticed that the `avatar` is a state instead of an import. Nvm — JkAlombro, May 25 '23 at 07:54
This might be similar to your problem. https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js — JkAlombro, May 25 '23 at 07:58

score 1 · Answer 1 · answered May 25 '23 at 09:49

1

<img src={require(avatar)}
alt={"Avatar"}
style={{marginLeft: "5%", width: "4vh"}}/>

answered May 25 '23 at 09:49

Yameen

104
1
6

it aslo doesn't work – Ubuty_programmist_7 May 25 '23 at 14:18

score -1 · Answer 2 · answered May 25 '23 at 08:00

-1

If the image file is in src/images I think the url needs to be images/first_image.png (you need to ditch the '..' at the beginning. If all avatar images are stored in this folder, it might be best to store just the filename in the database and have the img src be the filename + a baseUrl:

<img src={baseUrl + avatarFilename}
    alt={"Avatar"}
    style={{marginLeft: "5%", width: "4vh"}}/>

where

const baseUrl = 'images/'

answered May 25 '23 at 08:00

Myrto Pirli

85
8

it doesn't work – Ubuty_programmist_7 May 25 '23 at 08:06

I need to take an image in React

2 Answers2