images in react

1

I am trying to pass a url string as a prop to an image component , it does not seem to work, the url is from an api call, data is received just fine, when I inspect the element it says src = undefined

2

Can you share some code?

3

main app<<<

class App extends Component {
constructor () {
  super();
  this.state = {
    mytributes: []
  };
}

componentDidMount(){
  axios.get(mydatasource)
  .then(response =>{
    console.log(response.data);
    this.setState({
      mytributes: response.data
      
    })
  }).catch(function(){
    console.log("there has been a data fetching error");
  });
   
}

render() {
    return (
      <div className="App container">
       <AppHeader/>
       <MultiBanner/>
       <div className = "row">
     
        <FeaturedTributeV2 data = {this.state.mytributes}/>
      
        </div>
      </div> 
    );
  }
}

export default App;

display component <<<

const FeaturedTributeV2 = props => {
  const results = props.data;
  let mytributes = results.map(thetribute => <TestComponent2 
    key ={thetribute.tribute_id}
    tribute_sender_name = {thetribute.tribute_sender_name}
    tribute_receiver_name = {thetribute.tribute_receiver_name}
    tribute_sender_logo_image = {thetribute.trubute_sender_logo_image}
    tribute_location = {"City:" + thetribute.tribute_location.city + " Place:" + thetribute.tribute_location.place + " State:"+thetribute.tribute_location.state}
    tribute_timeStamp = {thetribute.tribute_timeStamp}
    tribute_title = {thetribute.tribute_title}
    tribute_img_url = {thetribute.tribute_img_url}
    tribute_firstmet = {thetribute.tribute_firstmet}
    tribute_connection = {thetribute.tribute_connection}
    tribute_content = {thetribute.tribute}
    />)
    return(
      <div className="featuredtribute col-lg-6">
      <ul> 
      {mytributes}
      </ul>
      </div>   
    ); 

  }

export default FeaturedTributeV2;

sub component <<<


const TestComponent2 = props => 

  (

<div className = "tribute-detail-component">
    <div className = "tributetopline">  
    
    <UserPicComponent UserPic = {props.tribute_sender_logo_image}/>
    <p className = "submittedby"><a href="https://www.vtkfsystem.com">{props.tribute_sender_name}</a> shouting out <a href="https://www.vtkfsystem.com">{props.tribute_receiver_name}</a></p>
   
     </div>
     <div className = "timeandplace">
     <p>{props.tribute_location} {props.tribute_timeStamp}</p>
     </div>
     <div className = "tribute-title">
     <p>{props.tribute_title}</p>
     </div>
     <div className="tributeimage">
     <img sr c= {props.tribute_img_url} />
     </div>
 
     <div className="tributecontent1">
     <p>First Met:{props.tribute_firstmet} Connection:{props.tribute_connection}</p>
     </div>
 
     <div className="tributecontent2">
     <p>{props.tribute_content}</p>
     </div> 
     <InteractionMetricComponent/>
     <SentimentClickComponent/>
     <CommentComponent/>
</div>

    );



export default TestComponent2;
4

^ You have an errant space in your “src” prop.

5

that must have happened when I pasted the code, not an issue in the actual code

6

Worked for me once I fixed the src.

7

Would it work if you just used a regular URL

8

Yup. You can try it yourself and see.

9

I’m using create react app, which utilizes web pack, is there some sort of web pack glitch that would make passing this img url as a prop an issue?

10

If its a relative url, yeah. You might want to try importing the image instead. create-react-app has an example of this with the logo when you first create an app.

1 Like
11

I’m making an API call and setting state with image URL that are sent back from the API for some reason when I look at the app and open the console all the other data from the API call renders perfectly but the image URLs are undefined and they are formatted very similar to the sunflower URL that I gave previously as an example I noticed that you had included the image as data in your codepen how did you do that is that what I’m supposed to do?

12

Pffft, somehow I had already forgotten thats where the image was being sourced in that last message :stuck_out_tongue_winking_eye: .

Images from a remote request like that would not be affected by webpack. They’d come in as a string path (presumably) and you’d just make sure to hook it up to your image. If the path is relative, you need to make sure its correct in relation to the HTML page. If not, there might be some finagling needed.

But undefined is a different thing. That could be something simple like a typo. If you’re seeing it in the request but its not in the image (or is in the image as undefined), then you’re messing something up somewhere between the request and the image. My codepen works and that’s pretty much a direct copy and paste of your code. The data URL I used was just me being lazy when creating the pen. If you replace it with the URL of the sunflower, it will show the sunflower - which is why I suggested to try it yourself and see. So my only guess is that your response isn’t using tribute_img_url for the image and instead using something else that looks like its there when you look at the data directly, but doesn’t match up with what you’re assigning to the image.