CODEWITHSUNDEEP
arraysreactjsfetch
Josh Simon
Josh Simon

Reputation: 259

React.js: Image from API call not rendering in browser

I'll explain this simply at first and then give more detailed examples of my code further to the end.

So, I'm making an API call in my parent component, as follows:

    componentDidMount() {
        const url = 'http://www.hashigozake.co.nz/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'
      
        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            beers: beerJs
          })
        })
      }

...the data from which is being passed as props to TileList.jsx :

<TileList beerList = {this.state.beers}/>

Within TileList.jsx, I'm mapping through the returned API data:

import React from 'react'
import Tile from './Tile'

const TileList = (props) => {
    props.beerList.children &&
    props.beerList.children.length && 
    console.log(props.beerList.children[0].children);
    return (
        <>
         <h1 className = 'h1-pouring'>Currently Pouring:</h1> 
        <div className = 'tile-container'>
            {
                props.beerList.children &&
                props.beerList.children.length &&
                props.beerList.children[0].children.map(product => {
                     return <Tile product = {product}/>

                })
            } 
        </div> 
        </>
    )
}

export default TileList

....and then passing that data as props to Tile.jsx

import React from 'react'

class Tile extends React.Component  {
    // console.log(`this is the product being passed to Tile: ${props.product.children[8].value}`)
    constructor() {
        super()
        
    }
    render() {
        return (
            <>
             {this.props.product.children[11].value === 'Now' ?
                <div className = 'tile'>
                <h1>{this.props.product.children[0].value}</h1>
                <h3>{this.props.product.children[10].value}</h3>
                <h3>{this.props.product.children[1].value} : {this.props.product.children[2].value}</h3> 
                <h3>ABV {this.props.product.children[3].value}</h3>
                <img src = {this.props.product.children[8].value}/>
                </div>
            :
            null
            }
            </>
            )
    }

}

export default Tile

So here's where the problem lies: <img src = {this.props.product.children[8].value}/> is not rendering an image in the browser (I'm getting the broken image icon). console.log(this.props.children[8].value) returns islandlife.png , which is the correct URL for the image. I also looked in the DOM, and the node for the image was <img src = "islandlife.png"> ==$0

If it's any help, here's the data from the API call that is passed as props :

children: Array(15)
0: {name: "Name", attributes: {…}, children: Array(0), value: "Island Life IPA", getElementsByTagName: ƒ}
1: {name: "Volume", attributes: {…}, children: Array(0), value: "300ml/473ml", getElementsByTagName: ƒ}
2: {name: "Price", attributes: {…}, children: Array(0), value: "$10/$13", getElementsByTagName: ƒ}
3: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
4: {name: "Handpump", attributes: {…}, children: Array(0), value: "No", getElementsByTagName: ƒ}
5: {name: "Brewery", attributes: {…}, children: Array(0), value: "Eddyline", getElementsByTagName: ƒ}
6: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
7: {name: "ABV", attributes: {…}, children: Array(0), value: "6.3%", getElementsByTagName: ƒ}
8: {name: "Image", attributes: {…}, children: Array(0), value: "islandlife.png", getElementsByTagName: ƒ}
9: {name: "Country", attributes: {…}, children: Array(0), value: "New Zealand", getElementsByTagName: ƒ}
10: {name: "Description", attributes: {…}, children: Array(0), value: "Fruited IPA", getElementsByTagName: ƒ}
11: {name: "Pouring", attributes: {…}, children: Array(0), value: "Now", getElementsByTagName: ƒ}
12: {name: "IBU", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
13: {name: "TapBadge", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}
14: {name: "Comments", attributes: {…}, children: Array(0), value: "", getElementsByTagName: ƒ}

Any ideas on how I can render the image? Thanks.

Upvotes: 0

Views: 185

Answers (1)

jason_r
jason_r

Reputation: 345

Does the URL need to be prefixed with additional URL that specifies where the API is serving the image from? With just the image name it seems like it's trying to render the image from a relative path in your app.

Upvotes: 1

Related Questions