能否通过import导入express.static托管的静态文件？

首先直接给结论：你不能用模板字符串拼接变量的方式通过静态import语句导入SVG，而且你写的/public/assets/${filename}.svg路径本身也存在错误，下面给你详细解释原因和可行的解决方案：

为什么静态import不能这么用？ #

ES模块的静态import是在编译阶段就被解析的，它要求导入路径必须是静态字符串，不能包含运行时才能确定的变量（比如组件props里的filename）。另外，你用express.static('public')托管静态资源后，前端访问时public目录是作为根路径的——也就是说public/assets/myImg.jpeg对应的前端访问路径是/assets/myImg.jpeg，所以import里写/public/开头的路径会找不到文件，因为服务器上并没有/public/public/assets这样的目录结构。

可行的解决方案 #

根据你的使用场景，推荐以下几种方案：

方案1：直接用<img>动态设置src（最适合仅展示SVG的场景） #

如果你只是把SVG当作图片展示，完全可以沿用你熟悉的方式，动态拼接src路径即可：

function SVGViewer({ filename }) {
  return <img src={`/assets/${filename}.svg`} alt="Dynamic SVG" />;
}

这种方式不需要任何import，直接利用express的静态资源托管，前端请求/assets/${filename}.svg时，服务器会自动映射到public/assets/${filename}.svg，简单高效。

方案2：用动态import()函数（适合需要将SVG作为组件导入的场景） #

如果你的项目配置了SVG转组件的loader（比如@svgr/webpack），需要把SVG当作React组件使用，可以用ES的动态import()函数（这是运行时执行的，支持变量路径）：

import { useState, useEffect } from 'react';

function SVGComponent({ filename }) {
  const [SVG, setSVG] = useState(null);

  useEffect(() => {
    const loadSVG = async () => {
      // 注意路径：根据你的组件文件相对于public/assets的位置调整，比如组件在src/components下，就用../assets/xxx.svg
      const module = await import(`../assets/${filename}.svg`);
      setSVG(module.default);
    };

    loadSVG();
  }, [filename]);

  if (!SVG) return <div>Loading...</div>;
  return <SVG />;
}

注意：这种方式需要确保你的打包工具（比如webpack）支持动态import，并且正确配置了SVG loader。

方案3：提前导入所有SVG并映射（适合SVG数量有限的场景） #

如果你的SVG数量不多，可以提前把所有可能用到的SVG都静态导入，然后用一个对象做映射，运行时根据filename取对应的组件：

// 提前导入所有SVG
import HomeIcon from '../assets/home.svg';
import UserIcon from '../assets/user.svg';
import SettingsIcon from '../assets/settings.svg';

// 创建映射表
const svgMap = {
  home: HomeIcon,
  user: UserIcon,
  settings: SettingsIcon
};

function SVGComponent({ filename }) {
  const SelectedSVG = svgMap[filename];
  if (!SelectedSVG) return <div>Invalid SVG filename</div>;
  return <SelectedSVG />;
}

这种方式的好处是编译时就把所有SVG打包好，运行时没有异步加载的开销，适合SVG数量固定且不多的场景。

补充说明 #

不管用哪种方案，都要记住：express托管public目录后，前端访问静态资源的路径不要带/public前缀，否则会导致404错误。比如public/assets/a.svg对应的前端路径是/assets/a.svg，而非/public/assets/a.svg。

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