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).
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)
Thanks ! #2620 opened.
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.
Issue #5263
Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
Issue #4249
image src won't change in exported HTML
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome 100 Reproducible demo link https://...
Issue #5046
is there any way to remove cross svg on selected default value of Float, Position and text-align
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 111.0.5563.147 (Official Build) (6...
Issue #3759
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link htt...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.