React导入PNG图片到导航栏出现import报错如何解决

核心错误原因 #

报错和图片本身、图片存放路径无关，是代码语法不符合JavaScript规范导致的：

• 导入变量名非法：import logo-light from "../logo-light.png" 中定义的导入变量名logo-light包含连字符-，在JavaScript语法中连字符属于减法运算符，引擎无法将其识别为合法的变量标识符，因此VS Code误判代码在使用仅TypeScript支持的import ... = 语法，抛出对应错误提示。
• img标签src传值错误：即使导入逻辑正常，<img src={"logo-light"} alt="logo" /> 是将字符串"logo-light"作为图片请求地址，并未引用实际导入的图片资源，会直接触发图片404加载失败。

修复方案 #

1. 修正导入语句的变量名 #

JavaScript合法变量名仅支持字母、数字、下划线、$，且不能以数字开头，将带连字符的变量名改为驼峰或下划线格式即可：

// 错误写法
// import logo-light from "../logo-light.png";
// 正确写法
import logoLight from "../logo-light.png";

2. 修正img标签的src属性 #

将导入的图片变量直接传入src属性，不要传入字符串字面量：

// 错误写法
// <img src={"logo-light"} alt="logo" />
// 正确写法
<img src={logoLight} alt="site logo" />

修复后完整组件代码 #

import React from "react";
import { Nav, NavLink, Bars, NavMenu } from "./navBarComponent";
import logoLight from "../logo-light.png";

const Navbar = () => {
  return (
    <>
      <Nav>
        <NavLink to="/">
          <img src={logoLight} alt="site logo" />
        </NavLink>
        <Bars />
        <NavMenu>
          <NavLink to="/ourcompany">Our Company</NavLink>
          <NavLink to="/contact">Contact</NavLink>
          <NavLink to="/locations">Locations</NavLink>
        </NavMenu>
      </Nav>
    </>
  );
};

export default Navbar;

补充：public目录存放图片的正确写法 #

如果选择将图片放在public目录，不需要编写import导入语句，直接在src中填写以根路径开头的资源地址即可：

// 无需import，直接引用public目录下的资源，路径以/开头代表站点根目录
<img src="/logo-light.png" alt="site logo" />

注意：public目录下的资源路径必须以/开头，否则会因路由相对路径匹配问题导致图片加载失败。

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