Can't load image from SVG image element

Question

I am trying to load a image as the svg background, but it only shows a broken image, I think the path is correct(the js and the image files are under the same directory) and I tried adding 'data:image/png;base64,' at the front it still didn't work, I also tried localhost, it didn't work neither.

  svg
  .append("image")
  .attr("width", "1352px")
  .attr("height", "721px")
  .attr("href", "img.png");

But I can load the image from <img> tag. I change to canvas to display the image, and image still cannot be displayed.However, the application can display online image.

 let img = new Image();
img.onload = function() {
  context.drawImage(img, 0, 0);
};
img.src =
  "img.png";

I am running the application on Chromium and using Parcel bundle.

Answer 1

好的，我想问题是我使用的是 Parcel，所以我需要导入图像文件。

import img from "./img.png";