Image can't be shown via mobile device

Ask the community
1

image
image1371×610 78.6 KB

The image displayed used to work with google drive for mobile device, which failed for no reason about two weeks ago. Then I use dropbox to work things out for both chrome or safari. However, a few days ago, same issue arise and I have tried using a number of image hosting but still showing the above broken link.

Anyone has experienced the same issue? Appreciate enlightenment!

I m using rich text and here below are the coding that you may see how it works.

<img alt="" src="https://i.imgur.com/C56PdR3.jpg" class="responsive-image" style="border-radius: 5%; display:block; height: auto;">

LINK involved: 天醫殿轉介優惠

2

I don’t know if this will solve the problem, but for my HTML content, stored in Airtable, using Text fields (not Rich Text) works well across all devices. Something to try.

One observation: when the image link is copied and pasted into a browser window, the imgur website displays a pop-up cookie consent modal. Might this be an issue?

FYI, the image that my HTML links to is this one: https://cdn.icon-icons.com/icons2/3685/PNG/512/whatsapp_logo_icon_229310.png
Maybe you could try substituting this link into your code, temporarily. Anything to try and narrow down the source of your issue.

3

Hey @twmeric,

We are checking this, hope to find the solution soon.

4

I replaced the DP Healthcare-💡HK$500 - 守護香港健康🩺-德珀健康達人！ with the above and also change to text fields, but it is still not working. It seems that it is not related to the image hosting issue. Pls kindly assist, it used to work and for no reason it stop functioning.

Appreciate yr kind help as usual.

Tks & brgds

Eric

5

I’m sorry to say that I’m out of ideas for you. I hope the Softr team can help you resolve this issue.

6

The broken images on mobile I checked last time still had broken HTML coming from Airtable data

7

Hi Artur,

You can have a look at this particular case and u will see the problem:
https://go.couponly.io/6yNFqh

In PC view mode, it is no problem, but when I load it via mobile view mode, the image becomes broken. While we found in the simulator as per below picture, you can see the link is not as it should be.

WhatsApp Image 2024-02-06 at 5.48.04 PM
WhatsApp Image 2024-02-06 at 5.48.04 PM1326×894 223 KB

With the same code, it worked fine a week ago, therefore, I wonder if the output for mobile view version has done any changes to cause this problem.

Hope you can help with this.

Tks & Brgds

8

I see from the screenshot you have shared a broken HTML

9

https://go.couponly.io/6yNFqh

The key point is same source code but it goes broken when being viewed in mobile view.

If u load the above link in PC view, u will see those pictures, but it doesn’t work when it is loaded in mobile view mode. The code that I am using in Airtable is as below:

<p style="text-align: left;"><span style="font-size: 20px;"><strong>換領方法:</strong> 憑優惠電子優惠券於 <strong><span style="background-color: rgb(255,255,0);">尖沙咀</span></strong> 地鐵站，放工時段閘內交收。<br><br><strong>付費方式:</strong> 即場 FPS / Payme / 現金<br><br>優惠登記完成後✅， <strong>24小時內</strong> 即有專人聯絡，確認訂單及安排交接。</span><br><br></p><p style="text-align: center;"><strong><span style="font-size: 30px;"><span style="color: rgb(85,107,47); text-decoration: underline;">Kare 專業推介</span></strong><br><br><span style="font-size: 20px;"><strong>Microsoft Office</strong> <span style="color: rgb(41, 105, 176);"><strong>Professional</strong></span> <strong>2021 專業版 (永久版本)</strong><span style="font-size: 24px;"><span style="background-color: rgb(2255,255,0);"><br><strong><span style="color: rgb(219, 68, 55);">優惠價 $999</span></strong></span></span><span style="font-size: 14px;"><span style="background-color: rgb(255, 255, 255);"> ( <s>原價 $3,399</s> )<br></span></span><p style="text-align: left;"><span style="font-size: 20px;"><strong>訂閱:</strong> 終身 (Lifetime) <span style="font-size: 16px;">含首60日免費Microsoft支援服務</span><br><strong>版本:</strong> 商業版<br><strong>安裝模式:</strong> 電子下載版</span><br><br><span style="font-size: 20px;"><strong><span style="color: rgb(15,157,88);">一個用戶 (Concurrent User) 使用</span></strong> —— <span style="font-size: 16px;">此版本只需用戶登錄，即可於已安裝的電腦操作2021版 Word, Excel, PowerPoint, OneNote 和 Outlook。</span> <img alt="" src="https://www.dropbox.com/scl/fi/m29k89ic4rjbz2acbd9oj/box.jpeg?rlkey=bisgkdafdqzfflwt31z15b5zu&raw=1" class="responsive-image"> <img alt="" src="https://www.dropbox.com/scl/fi/sdz61d8jlp36g68dn4it4/card.jpeg?rlkey=sfhlahz97nujjamgwpw7r7z4z&raw=1" class="responsive-image"><br><br></p><p><span style="font-size: 16px;"><strong>經銷商</strong>: Kare System Engineering Co Ltd <strong>(BNI Bingo Chapter)</strong></span><br><span style="font-size: 16px;"><strong>WhatsApp №</strong>: 51164453</p>
10

I took the code you pasted and put it into a code block in a Softr page that I use to test things with. Published, I can view the image when I change the User Agent to iPhone in Safari, but it is not responsive and therefore does not scale. The same happens when previewing in Softr studio switching between Desktop/Tablet/Mobile views.
I hope this is a small help to narrowing down the issue.

11

I m not using a code block, i use a text field in airtable to match with a text rich field in softr, since the layout of each campaign is different, that’s why I can’t upload those pictures to airtable. This started to have problem a week ago, which I didn’t change the code at all, therefore, I wonder if anything has done in the backend.

12

@artur @Suzie Any clue how to fix the issue? It has been over a week where I can’t perform the operation. Appreciate your kind help!

13

@twmeric our team is checking…

14

Hey @twmeric,

Our team did the needed checkups, we had such an issue in older block version which has been fixed. We recommend you update the block, the issue should be fixed after update.

Thanks,

15

Actually, just realized that simply don’t leave the img alt=“abc” empty, then, everything will be fine.