relative path images as labels fail in Safari

[tomhermans]

I seem to have stumbled on an issue with images as labels. If I use relative paths Safari won't show the icon. At first I thought there was an issue with using svg or jpg/png, (top ones are jpg/png, bottom ones are svg) but it is the path that apparently causes the icon to not show. Absolute paths > OK Relative paths: no icon showing in Safari

Same code. Chrome on the left, Safari on the right.

plugins: { labels: { render: 'image', images: [{ src: 'https://emn178.github.io/chartjs-plugin-labels/samples/demo/usa.png', // WORKS width: 20, height: 20 }, { src: '../assets/svg/fa-unlink.svg', // DOESN'T WORK width: 20, height: 20 }, { src: 'http://tomhermans.com/wp-content/themes/th_tomhermans_foundation_child/img/tomhermans_bol.svg', // WORKS width: 20, height: 20 }, { src: '../assets/img/ava.jpg', // DOESN'T WORK width: 20, height: 20 } ], // render: 'value', showZero: true, fontColor: 'white', position: 'inside', overlap: true } }

[kentbong]

Hi Do you have any update on this issue? I encounter same problem with yours. Thanks.

[AtanasChachev]

As I've tested, if you try with base64 image, the icon will appear. Something like:

{ 
  src: 'data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn ..... .png/jpeg',
  width: width,
  height: height
}

So the thing you can do is, load your local image -> then parse it to base64 and then assign that base64 image to the plugin 'src' prop.

Not very reliable way but it works... other way is to host your images on the server and load them from there.

[kentbong]

Fantastic! It works. Thank you for helping.