在React App中出现损坏的图像 [英] getting broken image in React App

问题描述

我正在尝试在React App中访问图像.运行代码时，我在网页上看到一个损坏的图像图标.我不确定是否正在访问图像的正确路径.我的代码如下:

I am trying to access an image in a React App. When I run the code I get a broken image icon on web page. I am not sure if I am accessing the right path for the image. The code I have is the following:

import React, { Component } from 'react';

class HeaderName extends Component {
    render() {
        return (
            <div>
                <h1>The AquaStars New Website.</h1>
                <img src="./images/picture_swimmers.png" />
            </div>
            )
        }
}

export default HeaderName; 

代码的结构如下

推荐答案

似乎您使用了错误的路径.如果我看到的正确，那么您上面发布的代码来自src文件夹中的header.js.由于您的图片文件夹是公开的，因此您需要先逐步扩展一个文件夹，然后再公开.您要使用的路径是

Seems like you are using the wrong path. If I am seeing this correct the code you posted above is from header.js which is in the src folder. Since your images folder is in public you would need to step up one folder then over to public first. The path you would want to use is,

    ../public/images/picture_swimmers.png

请注意，如果您打算创建生产版本，则此路径会有所不同.我以前使用的一个建议是，如果图像必须位于公用文件夹中，则可以像这样引用它们，

Just note if you plan on creating a production build this path would be different. One suggestion I have used before is if the images must be in the public folder then you can reference them like,

    src={process.env.PUBLIC_URL + '/images/picture_swimmers.png'}

这篇关于在React App中出现损坏的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！