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

Question

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

附：我在 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

无需在您的网址中使用 ../ 或 require .. 简单的技巧：从哪里为您的应用程序提供服务非常重要。如果您从 Tessact-Master 为您的应用程序提供服务，那么您的代码应该如下所示

只使用/dev 而不是./dev

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

Answer 2

首先，图像的 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>
        );
    }
}