尝试添加图像以反应项目时出错 [英] Error while trying to add image to react project

问题描述

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

I am working on a react project. I am trying to add an image to one of my components. I made a directory named "images" in my project structure tree and I have put my image in this directory (image of project structure is attached below). I want to pass this image as src to my img tag. For this I right clicked on image and selected "copy image path" and then pasted that path to src of img tag. But when I try to run it, I get an error saying "Failed to load resource: the server responded with a status of 404 (Not Found)". Here is my code of component and screenshot of project structure.

P.S。我在Ubuntu环境中

P.S. I am on Ubuntu Environment

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

推荐答案

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

No Need to use ../ or require in your url.. SIMPLE TRICK: It is very important from where you are serving you app. If you are serving your app from Tessact-Master then you code should be like this below

仅使用 / dev 不是 ./ dev

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

这篇关于尝试添加图像以反应项目时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！