Issue #2619Opened March 3, 2020by mcottret1 reactions

[Bug]: Default image placeholder's src attribute generated / exported as <svg> element

Question

Hi, and thanks for the great library !

We might have found the following bug when playing around with it:

When adding a new default "Image Block" without further configuration (leaving the default image placeholder), the exported / generated HTML code embeds the default svg element as the image's src attribute value (cf attached screenshots).

Screenshot 2020-03-03 at 4 31 40 PM Screenshot 2020-03-03 at 4 31 06 PM

After digging a bit into the code, it appears that the grapesjs/src/dom_components/model/ComponentImage.js's getAttrToHTML function should call this.getSrcResult (not sure whether or not to use the fallback option) rather than this.get('src') to retrieve the base64 encoded image src attribute (cf https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/ComponentImage.js#L78) .

Note: this would not satisfy a case where the embedAsBase64 option would be set to false, maybe in this case a public image placeholder URL could be used (TBD) ?

I'd be happy to open a PR to fix it, let me know :)

Answers (2)

mcottretMarch 4, 20201 reactions

Thanks ! #2620 opened.

artfMarch 4, 20200 reactions

Thanks for the report Mathieu

grapesjs/src/dom_components/model/ComponentImage.js's getAttrToHTML function should call this.getSrcResult (not sure whether or not to use the fallback option) rather than this.get('src') to retrieve the base64 encoded image src attribute

Correct, ignore the fallback option, it's used in the canvas only when the image is failed to load.

Note: this would not satisfy a case where the embedAsBase64 option would be set to false, maybe in this case a public image placeholder URL could be used (TBD) ?

embedAsBase64 option is for the file upload, this has nothing to do with this issue

So... go ahead for the PR! 👍

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.