Switching to mobile or tablet in Gutenberg editor breaks images of custom block

sage
1

Hi all,

We are using Bedrock and Sage. We are developing custom blocks in Sage, now this works all fine.

But when we switch to mobile or tablet in Gutenberg the images which are imported in custom blocks are breaking. But when we watch the desktop version the images are showing.

When we switch to mobile or tablet we see the alt text, when i check with the inspector i can visit the link and the image is showing. So it should work but why is it broken on tablet/mobile?

Thanks for your time!

2

When you write that you switch to tablet/mobile, do you mean using a real tablet/mobile device? What kind of device and what browser?

3

Sorry, I mean when u switch in the Gutenberg editor to tablet/mobile view. So in the Gutenberg builder we switch the view.

4

Are you using a srcset? When srcset references image URLs for specific widths, and those URLs are not found, the browser would try to use those for specific viewport widths (as in the narrower tablet and mobile views) and fail to display the image.

5

We just use src not srcset when I click the src link in the inspector the image is showing. But in the Gutenberg editor it is showing the alt text instead of the image when we switch to tablet/mobile mode.

6

Here is an example of how we create our custom blocks:

import test_image from '/images/test.png';
import { useBlockProps } from '@wordpress/block-editor';

export default {
    name: 'test/hero',
    title: 'Hero',
    icon: 'cover-image',
    category: 'test',
    edit: () => {
        const blockProps = useBlockProps();

        return (
            <>
                <div {...blockProps}>
                    <img src={test_image} alt="Test" className="w-full"/>
                </div>
            </>
        )
    },
    save: () => {
        const blockProps = useBlockProps.save();

        return (
            <div {...blockProps}>
                <img src={test_image} alt="Test" className="w-full"/>
            </div>
        )
    }
}

Everything works, when we add the block it shows the image. But then when we switch to tablet or mobile mode in the Gutenberg editor the image breaks.

7

Because this is a dynamic (viewport-dependent) behavior, inspect the image element and observe what properties change when changing the viewport to tablet/mobile.
The changes should be indicated in Chrome Developer Tools.
Also inspect the img-DOM element currentSrc property, does it still point to an existing URL?

8

Ok, so what I can see is the following:

The img-DOM element is keeping the same src, so there is no problem there. What I can see is that the tablet and mobile editor is being loaded inside an iFrame. When we switch back to desktop version the image is showing up again and the desktop version is not being showed inside an iFrame.

Is there any possibility to fix this issue so we can also see the images when editing page in tablet/mobile mode?

9

When this only occurs in an iframe, then it is caused by the host-relative URL of the image. I also encountered this issue and had to use an absolute path instead.

1 Like
10

Thanks for your answer, I did find a solution to the problem.

When switching to mobile/tablet in Gutenberg the image isn’t loaded because the image is an relative path.

So I did fix it to get the absolute path of the image and then set the image source in the edit function the absolute path.

import hero_overlay from '../../../images/hero-overlay.png';
import hero_home from '../../../images/hero-home.jpg';

const getAbsoluteImageUrl = (relativePath) => {
    return `${window.location.origin}${relativePath}`;
};

<img src={getAbsoluteImageUrl(hero_overlay)} alt="Hero overlay" className="relative w-full lg:w-auto !h-full 2xl:!h-[90%] object-cover"/>

This way the image is being loaded in tablet/mobile mode in Gutenberg.