Question

我尝试渲染带有图像以及其他属性的传单列表。但是，每次尝试使用正确的路径加载图像时，似乎都会出现404错误。

错误显示GET http://localhost:3000/assets/flyer1.png 404 (Not Found) 。

我很困惑，似乎也需要我启动后端来检索图像，但是在这种情况下这没有意义。

我的代码：

const myClass = () => {
    const events = [
        {
            "src": "../../assets/flyer1.png",
            "eventName": "Bruin Sunday",
            "eventTime": "October 11, 2020 3-4pm",
            "location": "TBD"
        },
        {
            "src": "../../assets/flyer2.png",
            "eventName": "Vision 2020",
            "eventTime": "October 17 12pm - 18 4pm, 2020",
            "location": "TBD"
        }
    ]

    /* Renders the list of flyers from json file */
    const flyerList = events.map((event) => {
        return(
            <Flyer src={event.src} alt={event.eventName} time={event.eventTime} location={event.location} />
        )
    })

    return (
        {flyerList}
    );
}

传单定义为：

const Flyer = (props) => {

    return(
        <div className="flyer-container" 
        onMouseEnter={()=>{setHovering(true);}} 
        onMouseLeave={()=>{setHovering(false);}}>
            <img className="flyer-img" src={props.src} alt={props.alt}></img>
            <div className="flyer-info">
                <p>Event name: {props.eventName}</p>
                <p>Event time: {props.eventTime}</p>
                <p>Location: {props.location}</p>
            </div>
        </div>
    );
}

任何见识都会有所帮助！谢谢

Answer 1

我无法在您的代码中找到任何错误，我认为只是尝试将“ src”变量的相对路径更改为绝对路径，否则它可能会开始起作用，因为在某些情况下，例如浏览器之类的路径似乎存在冲突无法找到文件的确切位置。希望它可以开始工作。

加载本地图像时反应：错误404

1 个答案: