求助：这段使用styled-components的React代码中img标签为何无法加载图片？

针对你React Navbar组件里图片无法加载的问题，从这几个方向排查：

• 路径与文件位置不匹配
  先确认appleWhite.png是否和Navbar组件文件在同一个文件夹里。如果图片放在子文件夹（比如src/assets），路径要改成对应的相对路径，比如../assets/appleWhite.png。另外注意文件名大小写，React项目里文件名是区分大小写的，别写错字母大小写。

• 未按React规范导入图片
  在Create React App这类用webpack构建的项目里，本地图片不能直接写相对路径，得先导入再使用：

  import React from 'react';
  import styled from 'styled-components';
  import appleLogo from './appleWhite.png'; // 先导入图片
  
  function Navbar() {
      return (
          <Container>
              <img src={appleLogo} alt="Apple Logo" />
          </Container>
      )
  }
  
  export default Navbar
  
  const Container = styled.div`
      height: 24px;
  `
  

• 静态资源配置问题
  要是你自定义了webpack配置，得确保配置了file-loader或url-loader来处理图片资源，不然webpack不会把图片打包到输出目录。也可以把图片放到项目根目录的public文件夹下，然后用绝对路径引用：<img src="/appleWhite.png" alt="Apple Logo" />。

• 图片文件本身问题
  检查图片是否损坏，直接双击打开看看能不能正常显示。另外确认文件后缀确实是.png，别是被改成了错误的后缀名。

内容的提问来源于stack exchange，提问作者Angad