能否用ES6 import()函数在浏览器加载图片？遇MIME错误如何解决？

你遇到的报错本质是：import()是专门用于加载ES模块的API，原生浏览器会把它请求的资源当作JS模块解析，而图片的MIME类型不符合模块脚本要求，所以触发了严格的MIME类型检查错误。

下面是两种可行的实现方式：

1. 原生浏览器环境（无构建工具） #

直接用浏览器原生的Image对象或fetch API加载图片，这是最适配浏览器环境的方案：

用Image对象加载（推荐，直接获取图片元素） #

const loadImage = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
};

// 使用示例
loadImage("./../assets/Index.png")
  .then(img => {
    console.log("加载成功", img);
    // 可直接将图片添加到DOM
    document.body.appendChild(img);
  })
  .catch(err => console.error("加载失败", err));

用fetch获取Blob（获取图片的临时URL） #

fetch("./../assets/Index.png")
  .then(res => {
    if (!res.ok) throw new Error("请求失败");
    return res.blob();
  })
  .then(blob => {
    const imgUrl = URL.createObjectURL(blob);
    console.log("加载成功", imgUrl);
    // 生成图片元素
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img);
    // 不需要时记得释放URL
    // img.onload = () => URL.revokeObjectURL(imgUrl);
  })
  .catch(err => console.error("加载失败", err));

2. 使用构建工具（如Vite、Webpack） #

如果你的项目用了构建工具，它们会把图片等静态资源处理成导出URL的模块，这时可以用import()动态加载：

Vite示例 #

// 动态加载图片，Vite会自动处理资源
import("./../assets/Index.png")
  .then(module => {
    const imgUrl = module.default;
    console.log("加载成功", imgUrl);
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img);
  })
  .catch(err => console.error("加载失败", err));

Webpack示例 #

需要确保配置了file-loader或asset modules（Webpack 5+默认支持），之后用法和Vite类似：

import("./../assets/Index.png")
  .then(module => {
    const imgUrl = module.default;
    // 后续操作同Vite示例
  });

注意：这种方式依赖构建工具的资源转换能力，不是原生import()直接支持图片加载。

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