# images in react

**URL:** <https://forum.kirupa.com/t/images-in-react/638705>\
**Category:** Uncategorized\
**Created:** [September 19, 2018, 1:58am UTC](https://forum.kirupa.com/t/images-in-react/638705 "2018-09-19T01:58:49Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 19, 2018, 1:58am UTC](https://forum.kirupa.com/t/images-in-react/638705/1 "2018-09-19T01:58:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 19, 2018, 4:09am UTC](https://forum.kirupa.com/t/images-in-react/638705/2 "2018-09-19T04:09:05Z")

</div>

Can you share some code?

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 19, 2018, 2:06pm UTC](https://forum.kirupa.com/t/images-in-react/638705/3 "2018-09-19T14:06:40Z")

</div>

> > > main app\<\<\<

```auto
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 \<\<\<

```auto
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 \<\<\<

```auto

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;

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 19, 2018, 2:25pm UTC](https://forum.kirupa.com/t/images-in-react/638705/4 "2018-09-19T14:25:47Z")

</div>

> [@bkfwebdev](#):
>
> \<img sr c= {

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

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 19, 2018, 2:37pm UTC](https://forum.kirupa.com/t/images-in-react/638705/5 "2018-09-19T14:37:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 19, 2018, 3:25pm UTC](https://forum.kirupa.com/t/images-in-react/638705/6 "2018-09-19T15:25:54Z")

</div>

Worked for me once I fixed the src.

https://codepen.io/anon/embed/preview/GXPyRe?height=300&slug-hash=GXPyRe&default-tabs=js,result&host=https://codepen.io&embed-version=2

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 19, 2018, 3:58pm UTC](https://forum.kirupa.com/t/images-in-react/638705/7 "2018-09-19T15:58:29Z")

</div>

Would it work if you just used a regular URL  
[![](https://images.freeimages.com/images/large-previews/99b/sunflowers-3-1393020.jpg) ](https://images.freeimages.com/images/large-previews/99b/sunflowers-3-1393020.jpg)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 19, 2018, 8:08pm UTC](https://forum.kirupa.com/t/images-in-react/638705/8 "2018-09-19T20:08:35Z")

</div>

Yup. You can try it yourself and see.

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 19, 2018, 8:29pm UTC](https://forum.kirupa.com/t/images-in-react/638705/9 "2018-09-19T20:29:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 20, 2018, 2:27am UTC](https://forum.kirupa.com/t/images-in-react/638705/10 "2018-09-20T02:27:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [September 21, 2018, 9:33pm UTC](https://forum.kirupa.com/t/images-in-react/638705/11 "2018-09-21T21:33:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 21, 2018, 10:31pm UTC](https://forum.kirupa.com/t/images-in-react/638705/12 "2018-09-21T22:31:32Z")

</div>

> [@bkfwebdev](#):
>
> I’m making an API call and setting state with image URL that are sent back from the API

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

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.