No suitable image URL loader found for about:///blank

[Nantris]

Decision Table

• [X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
• [X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• [X] I have read the HELP document here: https://git.io/JBi6R
• [X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• [X] I have confirmed that this bug has not been reported yet

Description

Not yet quite sure how to recreate this, but it seems definitely to be caused by react-native-render-html when using base64 strings for image src attributes.

React Native Information

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 12.5.1
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn
      npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
      Watchman: 2022.08.15.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
    IDEs:
      Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~46.0.10 => 46.0.10 
      react-native: 0.69.6 => 0.69.6 
    npmGlobalPackages:
      eas-cli: 2.2.1
      expo-cli: 6.0.6
    Expo Workflow: managed

RNRH Version

6.3.4

Tested Platforms

• [X] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Reproduction Platforms

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] MacOS
• [ ] Windows

Minimal, Reproducible Example

Not available yet, still working on pinpointing the trigger, but wondering if this has been seen before?

Additional Notes

Possibly related? https://github.com/ascoders/react-native-image-viewer/issues/186#issuecomment-414939558

I'm having trouble debugging/creating a repro in a timely fashion due to Flipper refusing to connect on iOS.

The issue seems not to occur if a custom renderer is defined for images like:

function ImageRenderer({
  TDefaultRenderer,
  ...props
}) {
  return (
    <TDefaultRenderer
      {...props}
    />
  );
}

const renderers = {
  img: ImageRenderer
};


<RenderHtml
  source={sourceHTML}
  renderers={renderers}
/>

[jsamr]

@Slapbox thanks for raising this! Hard to investigate without a reproduction, though. You mind sharing an HTML snippet you're trying to render?

[Nantris]

Totally understandable! Despite my best efforts since I opened the issue, so far, nothing. Thanks very much for your reply @jsamr!

An example HTML string would be like below - but the string alone can't cause the error to occur:

<p>123abc</p><img src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4TBcAAAAvZQAXAAfQ//73v/9hABLC//1SRP/TWwA=" /><p></p><p></p>

Maybe you can give me some idea how I might trigger it based on the workflow in our actual app. It's basically:

Scenario 1:

1. The source is loaded on the initial render like: <RenderHtml source={sourceHTML} />
2. An upstream change in the sourceHTML causes the component to re-render
3. If the new or old content contains an image tag, the application crashes as above

I've tried setting a key on RenderHtml to remedy this, but surprisingly it made no difference and the error persists.

Strangely, a very similar situation does not throw any errors. Some context here, we're reading from an array of html strings for the purposes of viewing revisions.

Scenario 2:

1. (Same as above) The source is loaded on the initial render like: <RenderHtml source={sourceHTML} />
2. (Here's the difference) We view the next or previous revisions in the list. Even if these contain or don't contain image tags, nothing crashes
3. Developer confusion ensues

---

The difference in the revision HTML could be as simple as changing the text in the first paragraph tag. When this occurs in the first scenario, the app crashes - but in the second scenario, everything is fine.

<p>123abc</p><img src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4TBcAAAAvZQAXAAfQ//73v/9hABLC//1SRP/TWwA=" /><p></p><p></p>

versus

<p>123</p><img src="data:image/webp;base64,UklGRiQAAABXRUJQVlA4TBcAAAAvZQAXAAfQ//73v/9hABLC//1SRP/TWwA=" /><p></p><p></p>

---

Any ideas for things to test?

One thing I've yet to try, for the purposes of reproducing, is loading remote images instead of base64 strings.

I've tried a bunch of things to repro this and/or to avoid the error in our actual use case, but no progress so far.

I'd hoped maybe repetitive forceUpdate() on the component rendering RenderHtml could provoke the issue, or that memoizing the component could avoid the issue, but nope.

[Nantris]

I just realized I have access to native crash logs. While they may not be of any use, here's one:

Crash logs: https://pastebin.com/35kLs7WR (won't render in full in a Github comment, for some reason)

[Nantris]

I'm tentatively concluding that this is not an issue with react-native-render-html, but that the error thrown by react-native-render-html preceded and masked what I believe to be the true underlying issue:

I'll close until/unless I find new evidence to the contrary. Thanks again @jsamr.

[dcdavidheisnam]

For me "No suitable image URL loader found for about:///blank" happens when the html contains an <img> element with no src attribute. I'm able to reproduce this every time.

[dcdavidheisnam]

@Slapbox Might want to reopen this? This is happening only on iOS btw.

[Nantris]

@dcdavidheisnam can you provide any additional details? In my example it happened even when we provided a src - although perhaps not a compatible src.

[watadarkstar]

@slapbox thanks for raising this! Hard to investigate without a reproduction, though. You mind sharing an HTML snippet you're trying to render?

Here is the HTML that throws an error for us:

<p>The book of Ephesians is cherished for its doctrinal depths and devotional beauty. Paul’s letter sets before us the blessings of salvation: new life in Jesus Christ and a new family in His church. As we read the prayers and doxologies woven through its verses, we see how the grace of God stirs us to lives of worship and gratitude.</p>
<p><strong>In his latest book, <em><a href="https://store.ligonier.org/ephesians-an-expositional-commentary-hardcover">Ephesians: An Expositional Commentary</a></em>, Dr. R.C. Sproul delves into the rich teaching, praises, and exhortations contained in one of his favorite books of the Bible.</strong></p>
<p>Take up this verse-by-verse guide to gain greater insights into the grace of the gospel and the glory of the Lord in the redemption of His people. This is a book to serve growing Christians, small groups, and pastors who want to know the Bible better. <strong><a href="https://store.ligonier.org/ephesians-an-expositional-commentary-hardcover">Order your hardcover copy today.</a></strong></p>
<p><a href="https://store.ligonier.org/collection/sproul-expositional-commentaries"><img src="//images.ctfassets.net/ukqj0ybhazqg/6617jXHDO7fUmuIE1m9PSV/3ebf3b6cbca4f02c53fb100bd5da9a02/1200x675_App_Push_Wide_EPH30_BOOK_transparent.png" alt="1200x675 App Push Wide EPH30 BOOK transparent"></a></p>
<p><strong>Dr. Sproul’s <a href="https://www.ligonier.org/store/collection/sproul-expositional-commentaries">expositional commentaries</a> can help you understand key theological themes and apply them to all areas of your life.</strong> Drawn from decades of careful study and delivered from a pastor’s heart, these sermons are readable, practical, and thoroughly Bible-centered. Here is your opportunity to learn from a trusted teacher and theologian as he leads you through God’s Word and shares his perspective on living faithfully for God’s glory.</p>

The image that is throwing the error is (I think its because there is no protocol in the src i.e. https://):

<img src="//images.ctfassets.net/ukqj0ybhazqg/6617jXHDO7fUmuIE1m9PSV/3ebf3b6cbca4f02c53fb100bd5da9a02/1200x675_App_Push_Wide_EPH30_BOOK_transparent.png" alt="1200x675 App Push Wide EPH30 BOOK transparent">