图像未在 React 中显示

Question

我在让图像出现在我的 React 项目中时遇到问题。 我以前做过，实际上复制了完全相同的代码以将其放入我的项目中，但由于某种原因没有显示任何内容。 我查看了控制台并检查了图像，它显示那里有东西，但只是没有以某种方式渲染。 我在网上搜索的任何内容都没有类似的问题，所以我想知道我是否只是遗漏了一些东西，这就是导致它无法呈现的原因。

这是我的文件中与我的问题有关的部分。

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>
        )
    }
}

这是它正在检索图像的证据：

如果有人知道我可能做错了什么，请告诉我。 谢谢。

Answer 1

我找出了这个问题的原因。 问题是我在与主路线'/'不同的路线上。 我通过这样做解决了我的问题： <img id="adImage" name='ADSingle' src={`/${ATASingle}`} alt="" width="100" height="100"/>