I am trying to use some imagery that is stored as in this example...
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
When I try to display the url as an image toolset seems to strip out/remove the "data:" leading to the image not being displayed. Yu can place this into any HTML.
Is there an option to not sanitize/remove that?
Hello and thank you for contacting Toolset support.
I assume that you are using an Image block, right? Well, in that case, you should distinguish between an URL and the src attribute of an image tag. The Toolset Image block won't let you enter a base64 code as an URL, because it is simply not an URL.
Instead, use a classic block, or a Fields&Text block, switch to the HTML/Code mode, and enter the code for the image tag.
I hope this answers your question. Let me know if you have any questions.
Hey Jamal
Thanks for the quick response. Unfortunately, entering the code in either a HTML or the Fields&Text block has the same effect. In the front end the "data:" part of the tag is stripped from the html leaving the tag incorrect and no image appears.( See attached screen shot) where the Fields&Text code is changed on the front end. Ultimately I have a custom field that contains the image tags but am simply trying to get it to work with raw HTML first before I substitute shortcodes etc
ALso interestingly if you click the VISUAL button in the Fields&Text bar you do see the image in the editor?
Is there some kind of filter or sanitation going on that is removing the "data:" part? I did find this but cant seem to see a solution (https://toolset.com/forums/topic/data-is-removed-from-its-url-for-base64-images-resulting-in-404s/page/2/) Sorry I am not a coder and am new to web dev.
Hey Jamal
I just put the identical code in a Fields&Text block on a regular page and not a Content Template and it works. So the content template is removing the "data:"?
This seems like a bug, would you like to reproduce it on one of our test sites? If it is reproduced, I'll escalate it to our developers. And I'll try to find a workaround for it. You can log into a test site using the following URL hidden link
Hey Jamal
I create a page on the test site using this code in a HTML block and it works correctly
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
I can not however seem to create a Content Template in this sandbox site to test the problem appropriately. Do you get the same problem in a Content Template?
You were not able to create a content template, because the Toolset Blocks or the Toolset Views plugin was not activated. I activated the Toolset Blocks plugin, and I created a content template. Then, I added the code inside a Custom HTML block and a Fields&Text block. The issue was not reproduced, as you can see on this page hidden link
You can check the content template here hidden link
Can I log into your website and check this issue closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Please let me know what content template are you working on or where I can see this issue.
Because this was not reproduced on a clean install, I suspect that another component(theme/plugin) is adding some filtering, to the results of a content template, that removes the "data:" that is necessary to render the image.
I created a custom shortcode for it, but the content is still filtered. We'll need to check if this issue appears when:
- Only Toolset plugins are activated. It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty-Twenty. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at a time to track where the incompatibility is produced.
If that does not help, we'll need to take a copy of your website and debug it further in a development environment. Let me know if that's fine with you.
Jamal
I may have fixed it. I disabled Jetpacks Lazy Loading for images and it seems to work now and maintains the data:.
Thanks
Awesome! Now we have detected where the compatibility conflict comes from. If you want to continue using that plugin, please install it on my test site and check that the issue is reproduced. I'll escalate it then to our developers for further analysis. However, it may take some time, as they will be prioritizing compatibility issues based on the popularity of the 3rd party component and how many of our users are using it.
If you will completely drop it, please mark this ticket as resolved.
All the best,
Jamal
My issue is resolved now. Thank you!
