API Blogger - 在移动设备上显示图片

Question

I've got a problem by using the Blogger API in PHP. When I publish an article with a picture on Blogger by using API, the picture appeared correctly on desktop version of my blog but no on mobile.

For example:

I send the following article on Blogger

<p><img src="https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg" /></p><p>Test</p>

On the index of my Blogger on Desktop, the pictures are correctly displayed:

Index Blogger on Desktop

I open the same page on mobile, and all pictures have disappeared:

Index Blogger on Mobile

I noticed that URL generated by Blogger are differents on mobile and desktop.

By inspecting element, the URL on mobile is exactly the same that I've sent thanks to the API (ie: https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg).

On desktop, the URL is totally different:

https://lh4.googleusercontent.com/proxy/...

If I edit the post directly on Blogger and if I replace the original URL (https://cdn.pixabay.com/photo/2018/10/03/21/13/mushroom-3722395_960_720.jpg) by the URL generated (https://lh4.googleusercontent.com/proxy/...), the picture appeared correctly on mobile!

Have you got an explanation? How I can display pictures on mobile by using this API?

Answer 1

Your blog uses two templates now one for desktop and other for mobile. The mobile template is one of old default blogger mobile templates which allow showing images that hosted on blogger only. Images hosted on blogger can be easily resized by change some values in image URL, that cannot be done with images hosted away off blogger.

Now you have to change mobile template and aplly the desktop template to cover both desktop and mobile.