CODEWITHSUNDEEP
reactjsimage
AltBrian
AltBrian

Reputation: 2562

getting broken image in React App

I am trying to access an image in a React App. When I run the code I get a broken image icon on web page. I am not sure if I am accessing the right path for the image. The code I have is the following:

import React, { Component } from 'react';

class HeaderName extends Component {
    render() {
        return (
            <div>
                <h1>The AquaStars New Website.</h1>
                <img src="./images/picture_swimmers.png" />
            </div>
            )
        }
}

export default HeaderName;

The structure of the code is the followingenter image description here

Upvotes: 4

Views: 14696

Answers (2)

Ashutosh Mishra
Ashutosh Mishra

Reputation: 39

I was having the same issue today, my image appeared broken.

When I imported the image first in the component it worked fine, in your case it will look something like the code below.

import React, { Component } from 'react';
import image from './images/picture_swimmers.png'    
    
class HeaderName extends Component {
    render() {
        return (
            <div>
                <h1>The AquaStars New Website.</h1>
                <img src={image} />
            </div>
            )
        }
    }
    
   export default HeaderName;

Upvotes: 3

Matthew Zielke
Matthew Zielke

Reputation: 161

Seems like you are using the wrong path. If I am seeing this correct the code you posted above is from header.js which is in the src folder. Since your images folder is in public you would need to step up one folder then over to public first. The path you would want to use is, 

    ../public/images/picture_swimmers.png

Just note if you plan on creating a production build this path would be different. One suggestion I have used before is if the images must be in the public folder then you can reference them like,

    src={process.env.PUBLIC_URL + '/images/picture_swimmers.png'}

Upvotes: 4

Related Questions