Create-React-App 无法找到我的图像文件夹

Question

我的 React Web 应用程序遇到问题，因为它找不到我的图像文件夹。我的组件文件夹内的导航文件夹中有一个导航栏组件。在组件文件夹之外是资产文件夹，其中包含我的 img 文件夹。

像这样：

src/
  assets/
    img/
      logo.png
  components/
    nav/
      Navbar.js

src/
  assets/
    img/
      logo.png
  components/
    nav/
      Navbar.js

这是我的 Navbar.js 组件：

import React, { Component } from 'react';
import Logo from './assets/img/logo.png';

class CustomNavbar extends Component {
    render() {
        return(
                <nav className="navbar navbar-expand-md navbar-dark transparent-nav-custom fixed-top" id="navbar"><a className="navbar-brand" href="/"><img className="pb-2 logo-image" src={Logo} alt="Lionsfield brand Logo" /></a>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon"></span></button>
                        <div className="collapse navbar-collapse" id="navbarsExampleDefault">
                            <ul className="navbar-nav ml-auto">
                            <li className="nav-item"><a className="text-center nav-link" href="/"><i className="fa fa-home"></i><br />Inicio <span className="sr-only">(current)</span></a></li>
                            <li className="nav-item"><a className="text-center nav-link" href="/Quienes-Somos"> <i className="fa fa-users"></i><br />Quienes Somos</a></li>
                            <li className="nav-item"><a className="text-center nav-link" href="/NuestrosClientes"> <i className="fa fa-building"></i><br />Nuestros Clientes</a></li>
                            <li className="nav-item"><a className="text-center nav-link" href="/Metodologia"><i className="fa fa-line-chart"></i><br />Metodología</a></li>
                            <li className="nav-item"><a className="text-center nav-link" href="/Certificaciones"><i className="fa fa-graduation-cap"></i><br />Certificaciones</a></li>
                            <li className="nav-item"><a className="text-center nav-link" href="/Contacto"> <i className="fa fa-envelope"></i><br />Contacto</a></li>
                            </ul>  
                        </div>
                </nav>

        )
    }

}

export default CustomNavbar

我正在运行 Node 版本 10.15.1，NPM 版本 6.9.0。

Answer 1

这就是你要找的。

import Logo from '../../assets/img/logo.png';