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

Question

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

PS我在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

无需使用../或在您的URL中要求。 简单技巧 ：从您为应用程序提供服务的位置开始非常重要。 如果您要从Tessact-Master提供您的应用程序，则您的代码应如下所示

仅使用/dev而不使用./dev

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