在 React App 中获取损坏的图像答案

【问题标题】：getting broken image in React App在 React App 中获取损坏的图像
【发布时间】：2018-08-22 20:40:06
【问题描述】：

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

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 属性。此外，如果您使用create-react-app 或类似的东西，您应该直接将图像作为其余资源导入以自动生成路径。 Like import Image from '<path>' 然后把 Image 放到 src 中
React 只是将 HTML 放在页面上。资产所在的位置取决于您和您的网络服务器。如果您使用的是 webpack，则应该 require() 图像的路径。推荐阅读：blog.andrewray.me/webpack-when-to-use-and-why

标签： reactjs image

【解决方案1】：

我今天遇到了同样的问题，我的图像似乎损坏了。

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

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;

【讨论】：

如果您的图像在源文件夹之外，则不允许这样做
可以，但是您可以在 src 文件夹中为图片创建一个文件夹
纯粹作为一个兴趣点：这是否符合 React 最佳实践？

【解决方案2】：

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

    ../public/images/picture_swimmers.png

请注意，如果您计划创建生产版本，则此路径会有所不同。我之前使用过的一个建议是，如果图像必须在公用文件夹中，那么您可以像这样引用它们，

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

【讨论】：