I am not sure if something I have done wrong but after an update last week, something broke with my images that are coming from page content and are inside a <figure>
Html2React adds a span
around the image:
<figure class="aligncenter size-large">
<span height="62" width="60" class="css-nd8buu-Container e16qyzlb0">
<noscript></noscript>
<img alt="" class="frontity-lazy-image wp-image-8477" loading="lazy" src="/wp-content/uploads/2020/06/phone-icon.svg" height="62">
</span>
</figure>
The culprit here is the span and more specific, the class css-nd8buu-Container
. That basically makes the image to not be visible. See image below. There should be an icon right above the title.
If I use a it like this <div dangerouslySetInnerHTML={{ __html: page.content.rendered }} />
I don’t have the issue.
Is there something I can do to solve this? I am not sure what the core of the issue is.