Image not displaying in React

Question

I'm having an issue getting an image to appear within my React project. I've done it before and actually copied the same exact code to put it into my project, but for some reason nothing is showing up. I looked in the console and inspected the image and it's showing that there is something there, but just not rendering somehow. Nothing I search for online has a similar issue so I'm wondering if I'm just missing something, and that's what causing it not to render.

Here is the parts of my file that pertains to my question.

import React from 'react';
import { Link } from 'react-router-dom';
import Button from '../../components/Spinner/Button';
import ATABanner from '../../../public/Images/ATAbanner-flip.png';
import ATADouble from '../../../public/Images/ATAdouble-1.png';
import ATASingle from '../../../public/Images/ATAsingle-1.png';
import '../../StyleSheets/AdContract.css';
import '../../StyleSheets/Button.css';

export default class CustomerPage extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            QuoteID: this.props.match.params.id,
            CustomerFirst: "",
            CustomerLast: "",
            CurrStep: 1,
            StoreList: [],
            StoresSelected: [],
            AdSize: "",
            AdSelected: "",
        }
    }

    ... extra stuff and methods here

    AdSizeHandler(e){
        console.log(e.target.id);

        switch(e.target.id){
            case "SINGLE": this.setState({AdSize: e.target.id});
                break;
            case "DOUBLE": this.setState({AdSize: e.target.id});
                break;
            case "BANNER": this.setState({AdSize: e.target.id});
                break;
        }
    }

    RenderAdSelected(){
        let img = null;
        let ad = this.state.AdSize;

        if(ad == "SINGLE"){
            img = (
                <img id="ad-image-single" name='ADSingle' src={ATASingle} alt="" width="100%" scrolling="no"/>
            )
        }else if(ad == "DOUBLE"){
            img = (
                <img id="ad-image-double" name='ADDouble' src={ATADouble} alt="" width="100%" scrolling="no"/>
            )
        }else if(ad == "BANNER"){
            img = (
                <img id="ad-image-banner" name='ADBanner' src={ATABanner} alt="" width="100%" scrolling="no"/>
            )
        }

        return img;

    }

    render(){
        return(
            <div id="CustomerContainer" style={{width: '100%', height: '100%'}}>
                <div id="CustomerContent" className="fade-in" style={{textAlign: 'center', width: '100%', height: '100%', overflowY: 'auto'}}>
                    <div id="Welcome" style={{marginTop: '5%'}}>
                        <p style={{fontSize: '35px', fontWeight: 'bold'}}>Hello, {this.state.CustomerFirst + " " + this.state.CustomerLast}</p>
                        <p style={{fontSize: '20px', color: 'orange'}}><b>Your Quote Is Almost Ready!</b></p>
                    </div>

                    <div style={{marginTop: '5%', color: '#0F9D58', fontSize: '37px'}}>
                        <p><b>Step: {this.state.CurrStep}</b></p>
                    </div>

                    <div id="InnerContainer" style={{width: '80%', marginLeft: 'auto', marginRight: 'auto'}}>
                         {this.RenderStoreSelect(this.state.CurrStep)} 

                         <div id="ad-select">
                            <div className="fade-in" id="ad-prompt">
                                <p style={{fontSize: '20px'}}><b>Please Select Your Ad Size</b></p>
                            </div>

                            <div id="ad-buttons" style={{display: 'inline-block', marginTop: '2%'}}>
                                <span style={{display: 'flex'}}>
                                    <Button name="SINGLE" color="G-green" click={this.AdSizeHandler.bind(this)}></Button>
                                    <Button name="DOUBLE" color="G-green" click={this.AdSizeHandler.bind(this)}></Button>
                                    <Button name="BANNER" color="G-green" click={this.AdSizeHandler.bind(this)}></Button>
                                </span>
                            </div>

                            <div>
                                <img id="adImage" name='ADSingle' src={ATASingle} alt="" width="100" height="100"/>
                            </div>
                        </div> 
                    </div>

                    {this.ConfirmQuote()}

                </div>
            </div>
        )
    }
}

Here is proof that it's retrieving the image:

If anyone has any idea what I'm possibly doing wrong, please let me know. Thanks.

Answer 1

I found out the reason for this issue. The problem is that I am in a different route than the home route '/'. I solved my problem by doing this instead: <img id="adImage" name='ADSingle' src={`/${ATASingle}`} alt="" width="100" height="100"/>