时间戳

首页 > 解决方案 > 反应：加载本地图像时出现错误 404

javascript - 反应：加载本地图像时出现错误 404

问题描述

我尝试使用图像和其他属性渲染传单列表。但是，每次我尝试使用正确的路径加载图像时，我似乎都会收到 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}
    );
}

Flyer 的定义如下：

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

任何见解都有帮助！谢谢

标签： javascriptjsonreactjs

解决方案

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

推荐阅读