Img path issues reactjs

Question

I am developing a react app. I am loading datas from a module like that

const results = [
{
    'home': 'fbc',
    'home_score': '74',
    'visitor': 'jda',
    'visitor_score': '69',
    'home_logo': 'jda_logo.png'
}]

What I am trying to do is loading images from the data (home_logo). But I don't know how to use relative path with React. I wanted to see what is the path when I load a picture with

import jda from './img/jda_logo.png';

And I am surprised the path is static/media/jda_logo.e596d19c.png Someone can explain to me what is the e596d19c that's been added ? And is it possible from me to load images with relative path that I am loading from my data ?

are you using webpack for build? if so, the extra bit is added by file-loader , more ref here : https://www.npmjs.com/package/file-loader — semuzaboi, Nov 13 '17 at 07:26
Yes I am using webpack, and it's for that thank you for the link — Lucas Tambarin, Nov 13 '17 at 15:04

score 0 · Accepted Answer · answered Nov 13 '17 at 09:36

In my opinion react is returning you the reference to the cached/copied media. Usually this is a result of the behaviour of builders/compilers/bundlers such as webpack. Essentially the image is the same but it is copied to a different location, used at runtime.

I believe you would like to take a look at this and this as they're handling questions quite close to yours.

Img path issues reactjs

1 Answers1