How to add pictures to webassembly application?

Anton1978

Good night.
I want to upload an application compiled in webassembly to a website. But at the same time, pixel images from the project are not displayed on the site.
I tried to add pictures first and write their URL in the QML code, but it turned out that the server converts pictures to BLOB format.
example blob link: blob:https://app.netlify.com/6718fa6a-93ad-4474-b3ab-15c5b5822c2e
The image is visible in the browser, but not visible in my project.
my code

Image{
anchors.fill: parent
source: "https://app.netlify.com/6718fa6a-93ad-4474-b3ab-15c5b5822c2e"
}

It doesn't work as I expected.
Maybe I'm doing it wrong overall and I need to add resources somehow differently.

ankou29666

Hi

how did you get that it's a blob file ? As far as I know blob is a browser feature, not server, I seriously doubt about a blob conversion on server side.

On my side, all I'm getting is

QML QQuickImage: Error decoding: https://app.netlify.com/6718fa6a-93ad-4474-b3ab-15c5b5822c2e: Unsupported image format ?

When I try to open your link in the browser the message is "page not found, you may not have the permissions to see this page, login".

Anton1978

This is my assumption that there is a blob format, since the entire link looks like this
"blob:https://app.netlify.com/096897db-728d-4484-8b1d-07bd99da035a"
I think the word blob indicates this (or not?)
Without quotes, and yesterday’s link is already outdated due to my experiments with downloading.

Anton1978

By the way, it doesn’t open again, I think you’re right - this is the wrong link.
But the question remains - how can I use images in a QML + webassembly project?

ankou29666

I don't know which page you used (either your webassembly app or a page on image host), but blob URL's are created by the browser. They're a convenient way of processing data while behaving like a data buffer.
Their main use is of HLS video streaming : basically JS code of the webpage creates the blob, the blob downloads the chunks of the video, and assembles them into a buffer, and seen from the outside, the blob looks like that data buffer. But blobs have other similar use, like for example displaying multiple times a single image with different image processing.
Since the blob and it's url are created by the browser, they have no meaning outside the browser or for another browser, or for the same browser on another machine.

My guess is that the most simple way is to choose one of these :

use Qt resource files
use a reliable image hosting service (something like serveimg that wouldn't delete your files after some time)
simply place your images in the same directory (or a subdirectory) of the website that will host your webassembly project

Anton1978

Thanks for the clarification, it's clearer now. I tried using Qt resource files but it doesn't work. Although it may be a server issue.

ankou29666

well I didn't realize it at first but in fact a blob URL doesn't reflect the true URL of the file that it represents (especially for HLS streams, you get one URL for multiple files).
any file with url like "https://www.some-site.com/some/path/to/desired/image.jpg" when accessed through a blob will get a blob url like "blob://https://www.some-site.com/${random-UUID}", so maybe you can find with another method the true URL of the file that you are trying to access

lorn.potter

Qt/Quick does not know how to handle Blob resources. You can either use a normal url, or pack in in a Qt resource file.