I’ve got some code that can display a variety of media items in a custom HTML component, as part of a larger project. Everything was working fine, until I added an SVG image and found that the SVG image would not display in the custom HTML component, but displayed fine when I used it elsewhere. PNGs and JPGs displayed fine in the same custom HTML component.
I tracked it down to the specific way I was working with the custom HTML component. I don’t know if this is exposing an odd bug in Anvil’s handling of SVG images, or just tickling something odd in browser handling of SVG images.
Just to be clear, I do not need help fixing this, this is more of a “Is this a bug in Anvil’s SVG handling?” sort of question. I suspect the issue has to do with sizing the SVG, which as a vector image doesn’t really have a built-in size.
Here’s a clone that shows the situation: Anvil | Login
It’s setup by default to load the same image into two custom HTML components. Each component uses a slightly different technique.
The top one creates a custom HTML component and uses add_component to add it to the form, and alters the HTML in the component’s form_show.
htmlForm = CustomHTML(media)
self.flow_panel_1.add_component(htmlForm)
self.html = '<img src="'+self.media.url+'">'
The second one calls a function on an existing custom HTML component.
self.custom_1.set_media(media)
def set_media(self, media):
self.html = '<img src="'+media.url+'">'
So it’s the same code changing the html property of the custom HTML form, it’s just happening at different spots.
If you change the use_png flag in form1 to True, you’ll see the PNG image displays fine in both cases.
