SVG/Canvas无法加载本地图片，<img>及在线图片正常，求助

阿华AIGC实验室

2026-5-6

解决SVG/Canvas本地图片加载失败（仅显示损坏标识）的问题

我来帮你排查这个棘手的问题！你遇到的情况很典型——本地图片能通过<img>标签正常加载，但在SVG和Canvas里就显示损坏，还能正常加载在线图片，结合你用Parcel打包、Chromium浏览器的环境，大概率是资源路径处理或浏览器本地访问限制导致的，给你几个针对性的解决思路：

用Parcel的模块引用方式加载图片
Parcel会自动处理静态资源的打包路径，但直接写相对路径可能在打包后出现引用错误。试试把图片作为模块导入到JS文件中，再使用导入后的路径：
```
// 在JS文件顶部导入图片资源
import imgSrc from './img.png';

// SVG加载图片时使用导入后的路径
svg.append("image")
  .attr("width", "1352px")
  .attr("height", "721px")
  .attr("href", imgSrc);

// Canvas加载图片时同样使用这个路径
let img = new Image();
img.onload = function() { context.drawImage(img, 0, 0); };
img.src = imgSrc;
```
这样Parcel会自动把图片复制到打包后的输出目录，并生成正确的资源路径，避免手动写相对路径的错误。
兼容SVG的图片引用属性
虽然现代SVG标准支持href属性，但Chromium在某些场景下对SVG内的图片引用可能需要兼容旧的xlink:href属性，试试同时设置两个属性：
```
svg.append("image")
  .attr("width", "1352px")
  .attr("height", "721px")
  .attr("href", imgSrc)
  .attr("xlink:href", imgSrc);
```
D3.js通常会自动处理SVG的命名空间，但加上xlink:href能进一步提升兼容性。
确保用Parcel开发服务器正常运行
不要直接打开本地HTML文件，一定要通过Parcel的开发服务启动项目（比如执行parcel index.html命令）。Chromium对本地文件的跨源访问有严格限制，即使是同一目录的资源也可能被拦截，而Parcel的开发服务器会模拟正常的HTTP环境，避免这个问题。
检查Parcel配置（如果有自定义设置）
如果你修改过.parcelrc或package.json中的Parcel配置，确认没有误排除png等图片格式的资源处理。默认情况下Parcel支持常见图片格式，但自定义配置可能导致资源未被正确打包。
排除图片本身的问题
虽然<img>能加载，但可以用一张其他的测试png图片替换img.png，看看是否能在SVG和Canvas中正常显示，排除原图片文件损坏或格式异常的可能。