Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to load a secure html image in a Text item
Forum Updated to NodeBB v4.3 + New Features

How to load a secure html image in a Text item

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
8 Posts 3 Posters 642 Views 1 Watching
  • 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.
  • M Offline
    M Offline
    Mr MinimalEffort
    wrote on 18 Sept 2021, 23:55 last edited by
    #1

    I have an application that is displaying html text from a secure server (Jira), this text will sometimes have images:

    <span class="image-wrap" style=""><img src="/secure/attachment/10000/10000_reply.png" height="17" width="22" style="border: 0px solid black" /></span>
    

    I am stuck as to how to actually display these images.
    By default it gives the obvious error:

    qrc:/IssueDetails.qml:90:9: QML QQuickText: Cannot open: qrc:/secure/attachment/10000/10000_reply.png
    

    My first thought was to replace the path with the full https://, but that gives a blank image as the image requires authorization.
    I have confirmed the image exists and can be accessed by downloading it, but I can't them embed that in some html unless I download it to disk somewhere

    Next I set the authentication cookie on the root networkaccessmanager, no luck,
    also tried setting a network proxy with no avail.

    Any advice?

    Kind Regards
    -Mr MinimalEffort

    (Windows 10, Qt-6.2, QtCreator-5.x)

    R 1 Reply Last reply 19 Sept 2021, 10:16
    0
    • M Mr MinimalEffort
      18 Sept 2021, 23:55

      I have an application that is displaying html text from a secure server (Jira), this text will sometimes have images:

      <span class="image-wrap" style=""><img src="/secure/attachment/10000/10000_reply.png" height="17" width="22" style="border: 0px solid black" /></span>
      

      I am stuck as to how to actually display these images.
      By default it gives the obvious error:

      qrc:/IssueDetails.qml:90:9: QML QQuickText: Cannot open: qrc:/secure/attachment/10000/10000_reply.png
      

      My first thought was to replace the path with the full https://, but that gives a blank image as the image requires authorization.
      I have confirmed the image exists and can be accessed by downloading it, but I can't them embed that in some html unless I download it to disk somewhere

      Next I set the authentication cookie on the root networkaccessmanager, no luck,
      also tried setting a network proxy with no avail.

      Any advice?

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 19 Sept 2021, 10:16 last edited by raven-worx
      #2

      @Mr-MinimalEffort
      implement a custom QQuickAsyncImageProvider and retrieve the image there from https

      Next I set the authentication cookie on the root networkaccessmanager, no luck,

      this will only work if you use QQmlNetworkAccessManagerFactory

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      1 Reply Last reply
      1
      • M Offline
        M Offline
        Mr MinimalEffort
        wrote on 29 Sept 2021, 09:24 last edited by
        #3

        Thanks @raven-worx sorry for the late reply, I apparently had notifications off.
        QQuickAsyncImageProvider will only work for Image components, not Text with html text.

        Is there a way I can connect an image provider to a Text component?

        I tried QQmlNetworkAccessManagerFactory but no luck there either, I think I may be missing some cookies in order to process the request and may need to check in with the Atlassian Developers

        Kind Regards
        -Mr MinimalEffort

        (Windows 10, Qt-6.2, QtCreator-5.x)

        R 1 Reply Last reply 29 Sept 2021, 09:40
        0
        • M Mr MinimalEffort
          29 Sept 2021, 09:24

          Thanks @raven-worx sorry for the late reply, I apparently had notifications off.
          QQuickAsyncImageProvider will only work for Image components, not Text with html text.

          Is there a way I can connect an image provider to a Text component?

          I tried QQmlNetworkAccessManagerFactory but no luck there either, I think I may be missing some cookies in order to process the request and may need to check in with the Atlassian Developers

          R Offline
          R Offline
          raven-worx
          Moderators
          wrote on 29 Sept 2021, 09:40 last edited by
          #4

          @Mr-MinimalEffort said in How to load a secure html image in a Text item:

          I tried QQmlNetworkAccessManagerFactory but no luck there either, I think I may be missing some cookies in order to process the request and may need to check in with the Atlassian Developers

          yes you need the cookies (authentication) in any case, no matter what when you want to send requests to the webserver.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          1 Reply Last reply
          0
          • M Offline
            M Offline
            Mr MinimalEffort
            wrote on 29 Sept 2021, 09:51 last edited by
            #5

            Yes, Jira provides an authentication user/accessKey to attach to each request, by passing this information alongside a get request I can access the image data fine, I just can't figure out how to hijack an image request coming from a qml Text item with the image embedded in html.
            My last ditch effort would be to download the image and replace the <img src tag with the dataUrl, though I'm not sure what the overhead of that would be

            Kind Regards
            -Mr MinimalEffort

            (Windows 10, Qt-6.2, QtCreator-5.x)

            R G 2 Replies Last reply 29 Sept 2021, 11:50
            0
            • M Mr MinimalEffort
              29 Sept 2021, 09:51

              Yes, Jira provides an authentication user/accessKey to attach to each request, by passing this information alongside a get request I can access the image data fine, I just can't figure out how to hijack an image request coming from a qml Text item with the image embedded in html.
              My last ditch effort would be to download the image and replace the <img src tag with the dataUrl, though I'm not sure what the overhead of that would be

              R Offline
              R Offline
              raven-worx
              Moderators
              wrote on 29 Sept 2021, 11:50 last edited by
              #6

              @Mr-MinimalEffort
              what QML element are you using to display the HTML content?
              And on what platform?

              --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
              If you have a question please use the forum so others can benefit from the solution in the future

              1 Reply Last reply
              0
              • M Mr MinimalEffort
                29 Sept 2021, 09:51

                Yes, Jira provides an authentication user/accessKey to attach to each request, by passing this information alongside a get request I can access the image data fine, I just can't figure out how to hijack an image request coming from a qml Text item with the image embedded in html.
                My last ditch effort would be to download the image and replace the <img src tag with the dataUrl, though I'm not sure what the overhead of that would be

                G Offline
                G Offline
                GrecKo
                Qt Champions 2018
                wrote on 29 Sept 2021, 14:38 last edited by
                #7

                @Mr-MinimalEffort using a QQmlNetworkAccessManagerFactory that returns a custom QNetworkAccessManager that adds the relevant cookies to your requests should work, I've done it in the past.

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Mr MinimalEffort
                  wrote on 29 Sept 2021, 18:00 last edited by
                  #8

                  Ah sorry @raven-worx I thought I had it in my example but I did not.

                  Text {
                      id: descriptionLabel
                      text: "Description:"
                      font.bold: true
                      wrapMode: Text.Wrap
                      textFormat: Text.RichText
                      text: "<p><span class=\"image-wrap\" style=\"\"><img src=\"https://ommitted.atlassian.net/secure/attachment/10000/10000_reply.png\" height=\"17\" width=\"22\" style=\"border: 0px solid black\" /></span></p>"
                  }
                  

                  Running on Windows 10

                  @GrecKo yes I suspect the cookies are being added correctly but I just have the wrong cookies and will need to discuss with atlassian

                  Kind Regards
                  -Mr MinimalEffort

                  (Windows 10, Qt-6.2, QtCreator-5.x)

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved