[bug] Gatsby: Can't get placeholder to show

[PeterDekkers]

Using "@twicpics/components": "^0.8.2" and Gatsby I can't seem to configure a placeholder. I understand that it should be rendering as a background image, but none is present.

The warning domain has not been configured shows in the console (I believe it comes from here), even though the domain has been configured in gatsby-config.ts and the main image does load correctly using the bar.twic.pics domain.

<TwicImg
    src="foo.jpg"
    ratio="2690/1793"
    placeholder="preview"
/>

... outputs...

<div class="twic-i ">
    <div class="twic-w twic-tf" style="padding-top: 66.6667%;">
        <img alt="Foo" data-twic-src="image:foo.jpg" class=" twic-done" src="https://bar.twic.pics/foo.jpg?twic=v1/cover=2690x1793">. 
    </div>
</div>

I assume that this is a bug relating to the Gatsby integration.

[PeterDekkers]

If I add a call to installTwicPics in my page template, then it does start working.

[mbgspcii]

Hi @PeterDekkers

Thank you for opening an issue.

It is curious. It should work (see https://twicpics-gatsby-demo.netlify.app/twicPlaceholder ).

I have just created a small start-up project here https://github.com/mbgspcii/TwicPicsxGatsby-starter. Can you try to run it?

Eventually, can you give me the version of gatsby used and send me a copy of your configuration file?

Best regards.

Miguel

[PeterDekkers]

Hello @mbgspcii. Thank you for setting up the project. It works perfectly, including placeholders. Feel free to close this issue. If I find out why the issue occurs in my codebase I will add an update here.

[PeterDekkers]

My Gatsby version is also 4.19.2, just like your starter. The config also looked very similar to the starter config. My site is however an established website with many more moving parts.

[mbgspcii]

Hi @PeterDekkers.

Thank you for your feedback.

Glad it worked out.

I'm closing the issue but I'll keep an eye out for any news.

Best regards.

Miguel