1

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)
Community
  • 1
  • 1
Ad N
  • 7,930
  • 6
  • 36
  • 80
  • I have tried your code and I have not had any problems, maybe I made a mistake in reproducing your error. Maybe you could provide a complete test through github or similar. – eyllanesc Aug 12 '17 at 03:48
  • @eyllanesc Thank you for your comment, there is now a minimal example showing the error: https://github.com/Adnn/so_QrcRelativePath – Ad N Aug 16 '17 at 14:12
  • I already post my answer – eyllanesc Aug 16 '17 at 16:18

2 Answers2

1

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.

Community
  • 1
  • 1
eyllanesc
  • 235,170
  • 19
  • 170
  • 241
0

Investigating the problem, it turns out that getting rid of all aliases in the .rcc file, and changing the resource path accordingly in the code, make it possible to use relative pathes.

Here are the changes to the sources:

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

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

</RCC>

-

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

I do not accept this answer yet, as it feels like a workaround. Hopefully there is a way to have it work with aliases.

Ad N
  • 7,930
  • 6
  • 36
  • 80
  • I have tried it with and without alias and I have not had problems. – eyllanesc Aug 16 '17 at 15:08
  • @eyllanesc Interesting! Are you using Qt5.9? Did you try the github example now provided with the question? – Ad N Aug 16 '17 at 15:20
  • I am using qt 5.9.1 on Linux, but with your code I have problems, I am trying to find the problem. – eyllanesc Aug 16 '17 at 15:22
  • 1
    Please try with this code: https://github.com/eyllanesc/stackoverflow/tree/master/so_QrcRelativePath-master – eyllanesc Aug 16 '17 at 15:46
  • @eyllanesc It seems you replaced `qrc:///test.html` with `qrc:/test.html`, and it **does** work with the aliases! Nice catch, yet it is very surprising to me that it is working, as [the documentation](http://doc.qt.io/qt-5/resources.html#resource-collection-files-op-op-qrc) uses `qrc:///`. If you turn it into an answer, it will be accepted ; ) – Ad N Aug 16 '17 at 15:55
  • When I want to copy a URL or path use Qt Creator, it generates this data as shown in the [image](http://imgur.com/a/UjGMO) – eyllanesc Aug 16 '17 at 16:00
  • OKay, I'll post that response. – eyllanesc Aug 16 '17 at 16:01