Unable to append an image to d3 svg element

[HammadAhmed]

I am working on a power bi custom visual using d3 and typescript. I have declared my constructor as below:

constructor(options: VisualConstructorOptions) {

    this.host = options.host;

    // Declare the svg property

    this.svg = d3

      .select(options.element)

      .append("svg")

      .classed(Visual.ClassName, true);

    // Append the image to the treeContainer

    const imageUrl = "http://www.google.com/intl/en_com/images/logo_plain.png";

    d3.select(options.element)

    .append("image")

    .attr("xlink:href", imageUrl)

    .attr("x", 0)

    .attr("y", 0)

    .attr("widht", 50)

    .attr("height", 50);

  }

Or tried another method:

constructor(options: VisualConstructorOptions) {

    this.host = options.host;

    // Declare the svg property

    this.svg = d3

      .select(options.element)

      .append("svg")

      .classed(Visual.ClassName, true);

    // Append the image to the treeContainer

    const imageUrl = "http://www.google.com/intl/en_com/images/logo_plain.png";

    this.svg

    .append("svg:image")

    .attr("xlink:href", imageUrl)

    .attr("x", 0)

    .attr("y", 0)

    .attr("widht", 50)

    .attr("height", 50);

  }

None of them works, here what I get:

What might be the possible error. Is there a solution to it?

Thanks in advance.