使用merge-images库合并图片时报Couldn't load image错误如何解决

你遇到的报错核心原因是 merge-images 库直接基于运行时路径加载图片资源，而你代码中使用的 @ 是 Vue 项目里 webpack/vite 等构建工具提供的编译阶段路径别名，只会在代码编译过程中被替换为实际的资源路径，运行阶段 @ 无法被识别，库找不到对应图片资源就会抛出 Couldn't load image 错误。

• 方法1：提前通过 import 引入本地静态资源，再传入方法调用，构建工具会自动处理为运行时可识别的真实资源路径，是最稳妥的方案

// script 头部先引入所有需要合并的图片
import bodyImg from "@/assets/body.png"
import eyesImg from "@/assets/eyes.png"
import logoImg from "@/assets/logo.png"

// 调用mergeImages时直接传引入后的变量即可
mergeImg() {
  mergeImages([
    bodyImg,
    eyesImg,
    logoImg,
  ]).then((b64) => {
    console.log(b64);
    document.querySelector("img").src = b64;
  });
},

• 方法2：直接写运行时可访问的资源路径，不需要使用别名，比如资源打包后部署在站点根目录的assets文件夹下，可直接写 /assets/body.png 这类路径，需要注意和部署后的实际路径匹配即可。
• 额外适配：如果需要合并的是外部域名的图片，需要确保图片配置了跨域访问权限，同时调用时添加跨域配置：

mergeImages([图片路径列表], {
  crossOrigin: 'anonymous'
})

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