webassembly does not display picture urls from web

Jan Bakker · wrote on 14 Jun 2023, 10:40

Hi,

I am testing and developing a webassembly project. This week I upgrade from QT 6.4.3 to QT 6.5.1 and from emscripten 3.1.14 to 3.1.25 and also tried Emscripten 3.1.41.

The problem I encountered after updating is that only images from a weburl are no longer displayed. Compiling with QT 6.4.3 displays these images without any problems.

I created this little test QML to test and explain my problem. So embedding an image works perfectly, but from a web URL the image is not displayed.

Does anyone have an idea what is causing this. Thanks in advance.

import QtQuick

Window {
    id: root
    width: Screen.width//1024
    height: Screen.height//768
    visible: true
    title: qsTr("Hello World")

    Image {
        id: pic
        width: 300
        height: 300
        anchors.centerIn: root
        //source: "https://www.intratuin.nl/media/Plantengids/Zonnebloem/Zonnebloem-helianthus-annuus.jpg"
        source: "qrc:/new/prefix1/images.jpg"
    }
}

Jan Bakker · wrote on 24 Jul 2023, 05:57

@Jan-Bakker Problem solved in QT 6.5.2.
In the release notes I found this, but i couldn't find it reported in detail so far-> "QTBUG-111892 wasm: asynchronous image loading never ends"

Joerg · 22 Jun 2023, 15:14

Hi,

i have observed the same. A deepter looking into whats happen (Brower debugger) shows that the image is not loaded via the network. At the moment I'm working on a solution on it.

Jan Bakker · J Joerg 16 Jun 2023, 07:39

@Joerg Hi. Thanks for your reply. Have you made any progress already? I not )-:

lorn.potter · 7 Nov 2023, 00:19

You can open the developer console and see any error messages.
I get one with that url:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.intratuin.nl/media/Plantengids/Zonnebloem/Zonnebloem-helianthus-annuus.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

If you use images on the same server, or use servers that allows Cross origin access, it will work.

Jan Bakker · 24 Jul 2023, 05:57

@lorn-potter: Thank you for the reply.
In the application I load images from my own web server. It is true that the CORS header had to be added. I had to do this in QT6.4.3 also a while ago.

About the sample source code: This is a picture from a random web server and indeed it is to be expected that they have not added this CORS header. So it might be a bad example.

However, it is still the case that when I compile an application with QT6.5.1, the images are loaded perfectly. If I build a webassembly in this version, the images won't load. In the Chrome develepor console I don't see any errors/warnings regarding this issue.

And as I noted already, in QT6.4.3 I have no problems at all.

Jan Bakker · wrote on 24 Jul 2023, 05:57

@Jan-Bakker Problem solved in QT 6.5.2.
In the release notes I found this, but i couldn't find it reported in detail so far-> "QTBUG-111892 wasm: asynchronous image loading never ends"

1XU7 · J Jan Bakker 14 Jun 2023, 10:40

@Jan-Bakker

Hey, sorry for answering an answered qustion.
Justo happy to read it, so, it is possible to load external images in Your web app so your wasm file is smaller?