代码之家  ›  专栏  ›  技术社区  ›  AltBrian

在React应用程序中获取损坏的图像

  •  1
  • AltBrian  · 技术社区  · 6 年前

    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; 
    

    代码的结构如下 enter image description here

    1 回复  |  直到 6 年前
        1
  •  2
  •   Matthew Zielke    6 年前

    好像你走错了路。如果我看到这是正确的,你在上面张贴的代码是从header.js,这是在src文件夹。由于您的images文件夹是公共文件夹,您需要先升级一个文件夹,然后再转到公共文件夹。你想走的路是,

        ../public/images/picture_swimmers.png
    

    请注意,如果计划创建生产构建,则此路径将不同。我以前用过的一个建议是,如果图片必须在公共文件夹中,那么您可以像这样引用它们,

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