尝试添加图像以反应项目时出错

Question

我正在研究一个反应项目。我正在尝试将图像添加到我的一个组件中。我在项目结构树中创建了一个名为“images”的目录，并将我的图像放在此目录中（项目结构的图像附在下面）。我想将此图像作为src传递给我的img标签。为此，我右键单击图像并选择“复制图像路径”，然后将该路径粘贴到img标签的src。但是当我尝试运行它时，我收到错误消息“无法加载资源：服务器响应状态为404（未找到）”。这是我的组件代码和项目结构的截图。

P.S。我在Ubuntu环境

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src="/home/user/Documents/Tessact-Master/dev/js/images/logo.png"/>
            </div>
        );
    }
}

Answer 1

首先，图像的src必须相对于其使用的组件的位置。假设CustomizedAppComponent位于components或containers文件夹中路径必须看起来像

 "../images/logo.png"/

如果组件再次位于文件夹components内的另一个文件夹中，则将路径设为

"../../images/logo.png"/             // add '../' so on 

另外，如果你使用webpack来转换你的jsx，你可能需要在require内提及src，如果没有，那么在下面的代码中再使用omit require。

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={require("../images/logo.png")}/>
            </div>
        );
    }
}

Answer 2

无需在您的网址中使用../或要求.. SIMPLE TRICK ：从您为app app服务的位置非常重要。如果您从 Tessact-Master 提供应用，那么您的代码应如下所示

仅使用/dev而不是./dev

export default class CustomizedAppComponent extends Component {
    render(){
        return(
            <div>
                <img src={"/dev/js/images/logo.png"}/>
            </div>
        );
    }
}