Issues loading inline email pictures with MSFT Graph (GET cid:image001.jpg@01D9D85E.978E6F80 net::ERR_UNKNOWN_URL_SCHEME)

Question

Project I'm using MSFT Graph to display the user's emails as <li> elements in a #messagesList div, then display the email's content (uniqueBody) in #readMessage when the user clicks on the <li>.

I started with the MSFT Learning module, "Show a user's emails in a JavaScript app with Microsoft Graph". As indicated in its README, this Learning module runs on http://localhost:8080/.

Issue When the email contains inline pictures, these pictures do not display. Instead, I get the error message: GET cid:image001.jpg@01D9D85E.978E6F80 net::ERR_UNKNOWN_URL_SCHEME.

Notes This does not appear to be an Outlook issue. The pictures display fine when I access the message with my desktop Outlook app. They also display properly when I access the message using Outlook.live.com. However I've compared the <img> html Graph creates in my project app with the <img> html in Outlook.live.com, and they are quite different. (see below)

When I inspect the image displayed by my Graph app, I find:

<div id="readMessage">
  <div>
    <div>
      <div dir="ltr">
        Inline pic 1
        <div>
          <img
            data-imagetype="AttachmentByCid"
            originalsrc="cid:ii_lltkl06t0"
            src="cid:ii_lltkl06t0"
            width="401"
            height="226"
            alt="20170623_131117.jpg" /><br />
        </div>
        <div>End inline pic</div>
      </div>
    </div>
  </div>
</div>

However, when I inspect the image displayed by Outlook.live.com, I find:

<div
  role="region"
  tabindex="-1"
  aria-label="Message body"
  class="ulb23 GNqVo yxtKT allowTextSelection">
  <div visiblity="visible">
    <div class="rps_6b70">
      <div>
        <div dir="ltr">
          Inline pic 1
          <div>
            <img
              data-imagetype="AttachmentByCid"
              originalsrc="cid:ii_lltkl06t0"
              data-custom="AAMkADAyMDJmMzJiLWE1MjItNDBjNC05NDE3LTg1NTNjOTQyMzlmNABGAAAAAABwWwtZmOj4T4RW8Z8Ka8bbBwCFeEwervdQRZZZ%2BhTc2PKgAAAAAAEMAACFeEwervdQRZZZ%2BhTc2PKgAACnhit0AAABEgAQAJVqZffS25BKhS%2BwhblgxJ8%3D"
              naturalheight="0"
              naturalwidth="0"
              src="https://attachments.office.net/owa/<myEmailAddress>.onmicrosoft.com/service.svc/s/GetAttachmentThumbnail?id=AAMkADAyMDJmMzJiLWE1MjItNDBjNC05NDE3LTg1NTNjOTQyMzlmNABGAAAAAABwWwtZmOj4T4RW8Z8Ka8bbBwCFeEwervdQRZZZ%2BhTc2PKgAAAAAAEMAACFeEwervdQRZZZ%2BhTc2PKgAACnhit0AAABEgAQAJVqZffS25BKhS%2BwhblgxJ8%3D&amp;thumbnailType=2&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjczRkI5QkJFRjYzNjc4RDRGN0U4NEI0NDBCQUJCMTJBMzM5RDlGOTgiLCJ0eXAiOiJKV1QiLCJ4NXQiOiJjX3VidnZZMmVOVDM2RXRFQzZ1eEtqT2RuNWcifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2sub2ZmaWNlLmNvbSIsInVjIjoiMThiN2NkNGQ3ZTJkNGI5Y2JkMWE0MDIxZjU2MjU1ZDgiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwidmVyIjoiRXhjaGFuZ2UuQ2FsbGJhY2suVjEiLCJhcHBjdHhzZW5kZXIiOiJPd2FEb3dubG9hZEA3YzU0ZDkzZi1lODQ4LTRmMmUtYTU5MS02NWUzMTI2MzM1YWYiLCJpc3NyaW5nIjoiV1ciLCJhcHBjdHgiOiJ7XCJtc2V4Y2hwcm90XCI6XCJvd2FcIixcInB1aWRcIjpcIjExNTM4MDExMjQwMTEyODMzOTRcIixcInNjb3BlXCI6XCJPd2FEb3dubG9hZFwiLFwib2lkXCI6XCJjNGEwNzU2NC0xZTBlLTQxZDAtOTRlOC1lYWJlNzQ3ZTkyZThcIixcInByaW1hcnlzaWRcIjpcIlMtMS01LTIxLTE4NDc2Mzc5MTItNDI3MTgwNTgwLTQyMTQ3ODM0NjMtMTUwODEyMDRcIn0iLCJuYmYiOjE2OTMyNjI2NzcsImV4cCI6MTY5MzI2MzI3NywiaXNzIjoiMDAwMDAwMDItMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwQDdjNTRkOTNmLWU4NDgtNGYyZS1hNTkxLTY1ZTMxMjYzMzVhZiIsImF1ZCI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMC9hdHRhY2htZW50cy5vZmZpY2UubmV0QDdjNTRkOTNmLWU4NDgtNGYyZS1hNTkxLTY1ZTMxMjYzMzVhZiIsImhhcHAiOiJvd2EifQ.aH-B8UkYqddkiPpNE7cdY_NibufbYNcSopckG6L4NxD8r05hE53RhAhCuHgYsj3PqSL5TL34t7GB4hInmdWFyDvwr-e0zuIJ-USZCYJEzfod4bccg0X_XFoG0jKNtpfVkTvSk_c07Us19bokW8QKSt2VzAdydcwDphApGP3vDIF7eFnA6bULOzjpH8JHMXc5hUI91auFeQiswLTc7MKa6ntZP0zzsncbwxl2yQXfdKc-mjO1BOy2OgXqAZRThWKLfSpf-BRWVQMlX4KYWDdIx8AkJNr6UQZxsr3ECLcMJNYT4msBiQoZjqpKBKDgY3qetYNynWnUfUcPu4IbHFbfDA&amp;X-OWA-CANARY=2als0Qo8mUKE__BGgQW6rMBh1WAYqNsYsihT4kn7d33-QkrOLB9DHNH8eB591xN7fm7ID9BDZZU.&amp;owa=outlook.office.com&amp;scriptVer=20230818006.10&amp;animation=true"
              alt="20170623_131117.jpg"
              width="401"
              height="226"
              crossorigin="use-credentials"
              fetchpriority="high"
              style="min-height: auto; min-width: auto; cursor: pointer"
              class="Do8Zj" /><br aria-hidden="true" />
          </div>
          <div>End inline pic</div>
          <div><br aria-hidden="true" /></div>
        </div>
      </div>
    </div>
  </div>
</div>

Question

Anyway, my basic question is: How can I fix this "UNKNOWN_URL_SCHEME" error...? or perhaps this is just something Graph can't do?

TIA ~ Jeff

Answer 1

Hello jdev,

Thanks for reaching out. For Graph SDK related issues I would suggest posting the issue on the respective Graph SDK Github forum.

Thanks.