0

I developing a SPA with https://openweathermap.org/, so i display img with

<img src={`http://openweathermap.org/img/w/${data.weather[0].icon}.png`}/>

Instead of this, i want to display another image from my local folder.I have created utils folder with index.js and another folder named weatherIcon with icons in .svg index.js i have

export const getWeatherIcon = (icon) => (/weatherIcon/${icon}.png)

in component i change

but nothnig display in app.

Question is: How display local image instead Api image

Mikson
  • 1

2 Answers2

1

There are different ways to use images in a React Project. Since, React follows Component architecture we have flexibility in React. So we can represent image (if it is an SVG image) As a React Component,and import and use it directly, or we can first import an image and use it in img tag's src attribute.

Please refer to watch this article to understand better and use a approach better suiting your needs.

betterprogramming.pub/how-to-display-images-in-react

Note: Sometimes in NextJS projec, I observed that we have to use React Component approach when using SVG. Also, we can use images in our public folder if they are .png, or .pneg etc and directly use absolute path to show them.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
0

my solution i crated new constance

    const WeatherIcon = {
    "01d": "/icons/01d.svg"
   }

then then import to component,

import{ WeatherIcon }from "utils/index";

and use in Img tags

<img className="weather_icon" src={WeatherIcon[data.weather[0].icon]}/>

thx for helping

Mikson
  • 1