React JSX能否无需命名导入图片？菜单项目图片不显示求助

一、图片无法显示的解决办法 #

在React中直接写相对路径或/src开头的绝对路径，打包后会因为资源路径变化导致无法加载，推荐两种正确做法：

1. 通过import导入图片后使用 #

这是React项目中最常用的方式，webpack会自动处理图片资源并生成正确的打包路径：

import React from "react";
// 逐个导入图片并绑定变量
import margheritaImg from "../assets/margherita.jpg";
import focacciaImg from "../assets/focaccia.jpg";

const FoodMenus = [
  {
    name: "Pizza Margherita",
    ingredients: "Tomato and mozarella",
    price: 10,
    photo: margheritaImg, // 使用导入的变量作为路径
    soldOut: false,
  },
  {
    name: "Focaccia",
    ingredients: "Bread, olive oil",
    price: 5,
    photo: focacciaImg,
    soldOut: false,
  },
  // ...其他菜品数据
];

2. 将图片放在public目录下使用根相对路径 #

把图片放到项目根目录的public/assets文件夹中，直接使用相对于打包后根路径的地址：

const FoodMenus = [
  {
    name: "Pizza Margherita",
    ingredients: "Tomato and mozarella",
    price: 10,
    photo: "/assets/margherita.jpg", // 路径以/开头，对应public下的assets目录
    soldOut: false,
  },
  // ...其他菜品数据
];

二、React JSX中能否无需定义名称导入图片？ #

不行。ES模块的import语法要求必须将导入的资源绑定到一个变量名，即便你写import "../assets/margherita.jpg"这种无变量的导入，webpack虽然会处理图片资源，但你无法在代码中引用它的实际路径，这种写法没有实际意义。要在JSX中使用图片，必须通过导入时定义的变量来获取打包后的正确路径。

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