原生JavaScript导入SVG文件遇MIME错误及断言尝试失败求助

问题原因 #

原生浏览器的ES模块系统仅支持导入JavaScript模块（MIME类型为application/javascript），直接import SVG文件时，服务器返回的image/svg+xml类型不符合要求，导致第一个错误；而ES模块的import断言目前仅支持json等有限类型，不支持image/svg+xml，所以添加断言后会触发第二个错误。

可行解决方案 #

方案1：使用Fetch API加载SVG

通过fetch请求SVG文件，获取其文本内容后插入到DOM中：

async function loadFlagSVG() {
  try {
    const res = await fetch('../assets/icons/flag.svg');
    const svgContent = await res.text();
    // 将SVG插入到目标容器
    const container = document.querySelector('.svg-target');
    container.innerHTML = svgContent;
  } catch (err) {
    console.error('加载SVG失败:', err);
  }
}
// 调用加载函数
loadFlagSVG();

方案2：将SVG封装为JS模块导出

创建一个flag.js文件，把SVG代码作为字符串导出：

// flag.js
export default `
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- 这里是你的SVG具体代码 -->
</svg>
`;

然后在主JS文件中导入并使用：

import flag from './flag.js';
document.querySelector('.svg-target').innerHTML = flag;

补充：使用构建工具（可选）

如果你的项目使用Vite、Webpack等构建工具，它们内置了SVG导入支持，可以直接按你最初的写法导入（构建工具会自动处理资源转换），但这不适用于纯原生浏览器环境。

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