Ad N Ad N - 6 months ago 69
C++ Question

QWebEngineView does not load relative resources from an html page if the page is loaded from Qt RCC resource system

edit: Following @eyllanesc comment, here is a minimal example hosted on github. The test is run on Qt5.9, on OS X 10.12.

Base HTML



Let's create a minimal example HTML loading an image by relative path, test.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>Image:</div>
<img src="img.jpg"></img>
</body>
</html>


This file is created in a folder also containing img.jpg (which should be a picture of an adorable puppy)

When test.html is opened directly in the browser, it shows the image as expected.

 The problem with qrc and relative paths



Now, if we embed both resources into a Qt application, with the following .qrc file:

<!DOCTYPE RCC><RCC version="1.0">

<qresource>
<file alias="test.html">resources/web/test.html</file>
<file alias="img.jpg">resources/web/img.jpg</file>
</qresource>

</RCC>


We can open the HTML page in a
QWebEngineView
with some code of the form:

mWebView->load(QUrl{"qrc:///test.html"});


The page is loaded, but the image is not.

Enabling the web developer console (by running the app with argument
--remote-debugging-port=8888
) and going to the Network tab, we can see that there is not even an attempt to load img.jpg.

 With absolute path, no problem



If the image element was changed to
<img src="qrc:///img.jpg"></img>
, then everything works fine and the image is loaded.

Questions




  • Is this limitation of the qrc system by design?

  • Is there a way to work around it? (without hardcoding the absolute path with the scheme)


Answer Source

The main problem seems to be how the URL of the .html file is declared:

In the case of @ad-n he followed the docs:

...

For example, the file path :/images/cut.png or the URL qrc:/// images/cut.png would give access to the cut.png file, whose location in the application's source tree is images/cut.png. This can be changed using the file tag's alias attribute:

...

And use: qrc:///home.html

However in my case I used Qt Creator to provide me the url as shown in the following image:

enter image description here

And use: qrc:/home.html

That's why I work on my case.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download