Images in React.js

Question

Why can't I get local images to load?? I'm using create-react-app and I have the image I'm referring to in the src folder. Here is my app component.

import React, { Component } from 'react';
import './App.css';
import './golf.jpg'

class App extends Component {
  render() {
     return (
       <div className="main">
         <div className="search">
            <input type="text"></input>
            <input type="submit"></input>
         </div>
          <div className="nav">
            <ul>
              <a href="#"><li>Cats</li></a>
              <a href="#"><li>Dogs</li></a>
              <a href="#"><li>Birds</li></a>
            </ul>
          </div>
         <div className="photos">
          <ul>
            <li><img src="./golf.jpg" alt="golf"/></li>
            <li><img src="golf.jpg" alt="golff" /></li>
          </ul>
         </div>
       </div>  
     );
  }
}

export default App;

Any help is appreciated I'm assuming it's something really simple. Thanks.

Answer 1 · 2017-10-15T17:14:09Z

October 15, 2017 5:14pm

Hiya there! Lets consider a example:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

See console.log of logo file only logs out the data uri of the image , not the image itself. This applies to extensions of .jpg, gif, bmp, jpeg and png excluding svg (coz its pretty much HTML). You might ask why does this happen? Since logo, in above example, is the data uri of the image, so yeah when you carry out your build process, webpack or create-react-app couldnt move out the image from the file coz its simply a data-uri , not the image.

But there is an easy fix to this issue. You can place the logo uri in the src attribute of the img tag.

~ Ari

Welcome to the Treehouse Community

Looking to learn something new?

Jeriah Bowers

Jeriah Bowers

Images in React.js

1 Answer

Ari Misha

Ari Misha