在React App中损坏图像

Question

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

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; 

代码的结构如下

Answer 1

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

    ../public/images/picture_swimmers.png

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

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

Answer 2

我今天遇到了同样的问题，我的图像看起来坏了。

当我首先在组件中导入图像时，它运行良好，在您的情况下，它看起来类似于下面的代码。

import React, { Component } from 'react';
import image from './images/picture_swimmers.png'    
    
class HeaderName extends Component {
    render() {
        return (
            <div>
                <h1>The AquaStars New Website.</h1>
                <img src={image} />
            </div>
            )
        }
    }
    
   export default HeaderName;