c++qtqt5qt-resourceqwebengineview

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

Solution

  • 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.