CODEWITHSUNDEEP
javascriptd3.js
Chi
Chi

Reputation: 355

Can't load image from SVG image element

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.

Upvotes: 2

Views: 748

Answers (1)

Chi
Chi

Reputation: 355

OK, I think the problem is I am using Parcel, so I will need to import the image file.

import img from "./img.png";

Upvotes: 1

Related Questions