Images in SVG Image tags not showing up in Chrome, but displays locally?

Question

For some reason, Chrome is displaying the SVG without the images in its Image tags.

Here is a sample from my SVG:

Answer 1

I happened to find out that Chrome [v 58.0.3029.81 (64-bit)] doesn't show the image inside svg if the image file is not located at html root directory. The .svg and the embedded .png files were placed in /images -folder, the .svg content came up right in Chrome, but not the embedded .png. When the .png was copied to (../) the html root, Chrome works.

However, Firefox [v 52.0.2 (32-bit)] seems to work fine when .svg and .png are in the same /images folder.

Edit: Actually in my case I load the svg with d3.xml(..) method for getting js handle to the actual svg elements.