how to fetch image from the API using react js

Question

i can't display the image in my website, which is fetched from the API.

this is my image fetching/showing code.

this.state.filteredData.map((data,i) =>
                    <div>
                        <span>{data.details.name}</span>
                        <br/ >
                       <img source={{uri:data.details.image}} style={aStyle} />
                        <br/>
                        <span>{data.details[ 'section of law' ]}</span>
                        <br />3

                        <span>{data.details[ 'type of person' ]}</span>
                    </div>

const aStyle={
    width:300,
    height:360
};

only image box is showing.

Possible Duplicate of [Load images based on dynamic path in ReactJs](https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs/45334965#45334965) — Shubham Khatri, Mar 19 '18 at 11:43
Possible duplicate of [Load images based on dynamic path in ReactJs](https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs) — Mathews Sunny, Mar 19 '18 at 11:49
Can you try this : '' ? Also, can you give us an exemple of your data object ? — MaieonBrix, Mar 21 '18 at 13:50
Can you open dev tools, inspect the element and see if there are any errors? — Hinrich, Mar 21 '18 at 13:55

score 0 · Answer 1 · answered Mar 19 '18 at 11:38

0

<img src={{uri:data.details.image}} style={aStyle} />

answered Mar 19 '18 at 11:38

Yossi

5,577
7
41
76

score 0 · Answer 2 · answered Mar 19 '18 at 11:52

0

image has src attribute and you can pass image url string or base64 image data to it.

<img src={data.details.image} style={aStyle} />

answered Mar 19 '18 at 11:52

Vikramaditya

5,444
6
34
45

how to fetch image from the API using react js

2 Answers2