Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Proper way to display local images in QtWebEngineView?

    QtWebEngine
    4
    9
    1710
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      donquibeats last edited by

      This is my first dip into QtWebEngineView, using it as a component in my larger PyQt5 app.

      There's a situation where I want to be able to show dynamically generated HTML in a preview widget. Things are working fine with QtWebEngineView and I'm using the setHtml() method to feed a programmatically-created HTML file directly to the widget without saving it to a file first.

      However I can't find a way of getting images to display using this method. I've tried qrc:/// URL's with relative paths for the application, file://// paths for absolute local paths, and so on. Everything I've tried so far has resulted in an invalid src showing as a broken link.

      Is there a way to get locally-stored images to display in a QtWebEngineView that has been populated using setHtml()?

      If so, what syntax should I be using for the img src tags please?

      Are there security restrictions about where the file can be stored, can the file be anywhere on the user's machine or must the files be within the domain of the application's working area etc.?

      These images will vary in number so as far as I can tell from the docs, a .qrc resource file isn't going to work for me?

      Thanks

      JonB 1 Reply Last reply Reply Quote 0
      • JonB
        JonB @donquibeats last edited by

        @donquibeats
        The page is HTML, so just normal <img src="..."> syntax. Certainly not qrc:///, won't be understood. file://// should work if that's acceptable in HTML, not sure where that might be rooted from. Or void QWebEnginePage::setHtml(const QString &html, const QUrl &baseUrl = QUrl()) takes an optional base URL:

        baseUrl is optional and used to resolve relative URLs in the document, such as referenced images or stylesheets.

        I can't recall what plain /... is rooted at if you do not specify a base URL.

        1 Reply Last reply Reply Quote 1
        • D
          donquibeats last edited by

          Thanks for the response.

          I can get images to show in the QtWebEngineView if I use test images off the internet, and set a baseUrl beginning with http://www. etc.

          However I'm still drawing a blank with trying to get the QtWebEngineView to show files that have been saved to a local folder. No option I've tried for the baseUrl setting has managed to sort that so far- I was particularly thinking that os.path.abspath(__file__) should be an acceptable value for baseUrl, but no joy with that.

          Again, I don't understand if there are sandboxing restrictions going on here.

          I seem to still be missing something?

          1 Reply Last reply Reply Quote 0
          • eyllanesc
            eyllanesc last edited by eyllanesc

            Use view.setHtml(HTML_STR, QtCore.QUrl.FromLocalFile(os.path.dirname(os.path.realpath(__file__))))

            If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

            JonB 1 Reply Last reply Reply Quote 1
            • JonB
              JonB @eyllanesc last edited by JonB

              @eyllanesc
              So this is using the void QWebEnginePage::setHtml(const QString &html, const QUrl &baseUrl = QUrl()) I referred to earlier. We should perhaps clarify to @donquibeats that this statement makes any relative URLs (e.g. in <img src="...">) to be sought relative to the directory of the Python script file executing this line. Depending on where the OP's image files are located, this might need adjusting appropriately.

              1 Reply Last reply Reply Quote 0
              • eyllanesc
                eyllanesc last edited by

                I think the OP knows that since it tries to use os.path.abspath(__file__), also that is explicit in the docs

                If you want me to help you develop some work then you can write to my email: e.yllanescucho@gmal.com.

                JonB 1 Reply Last reply Reply Quote 0
                • JonB
                  JonB @eyllanesc last edited by JonB

                  @eyllanesc
                  I always respect your replies, they are always really good. However, in this case personally I am not keen on using __file__: if you lay out your Python program with subdirectories for sources, and this line comes in one of those subdirectories, links will relative to there, which may not be obvious.

                  I think I would prefer using os.path.abspath(sys.argv[0]) so that I know everything is relative to where the main program script is, which doesn't change. What do you think?

                  1 Reply Last reply Reply Quote 0
                  • D
                    donquibeats last edited by

                    Thanks @JonB and @eyllanesc for the really helpful responses. Thanks to you I've understood that the images should be within the folder structure of the running script, and I've got things working as wanted as a result.

                    I already had a small custom function for identifying the path of the script, due to unrelated previous issues with PyInstaller and operating paths, so I was able to feed that to the QUrl constructor. But yes, when running in a non-compiled state, this is based on os.path.abspath.

                    Thanks again

                    1 Reply Last reply Reply Quote 1
                    • R
                      redstoneleo last edited by redstoneleo

                      I'd give an example of proper loading local images from PyQt or PySide, in my case images should be within the folder structure of the running script.

                      self.webPage.setHtml('<img src="uk_pron.png"/>', baseUrl=QUrl.fromLocalFile(os.getcwd()+os.path.sep))
                      

                      don't forget to add the trailing path separator os.path.sep to os.getcwd(), otherwise the image won't show.

                      1 Reply Last reply Reply Quote 1
                      • First post
                        Last post