CODEWITHSUNDEEP
reactjs
Hongbo Miao
Hongbo Miao

Reputation: 49804

The image in the raw html is not rendered in React

I try to render a raw html (email). This html has an image.

<img src="http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png" alt="Google Play" style="border:none">

Live demo, showing image

image

But when I use dangerouslySetInnerHTML, the image is not rendered.

Live demo, not showing image

image

  render() {
    const content = `
<img src="http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png" alt="Google Play" style="border:none">
    `;

    return (
      <div dangerouslySetInnerHTML={{__html: content}} />
    );
  }

How can I render it correctly? Thanks

UPDATE: I found if I change the image source to https, it will work.

Unfortunately, I don't have the control of the raw html, it is from email. How can I render image with url http?

It shows the error:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://www.gstatic.com/android/market_images/email/play_hydra_logo_email.png'. This request has been blocked; the content must be served over HTTPS.

Upvotes: 2

Views: 1630

Answers (2)

Liam
Liam

Reputation: 6743

Following the gnudi's reference, the RFC 3986 section 5.2 says:

If the scheme component is defined, indicating that the reference starts with a scheme name, then the reference is interpreted as an absolute URI and we are done. Otherwise, the reference URI's scheme is inherited from the base URI's scheme component.

class App extends React.Component {
  
  render() {
    return (
 <div>
        <img src='//gstatic.com/android/market_images/email/play_hydra_logo_email.png'                alt="Google Play"
            style={{border: 'none'}}/>
          
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

Upvotes: 1

Chris
Chris

Reputation: 58182

From the conversation in the comments, this appears to be linked to JSFiddle and possibly its use of iframes combined with requesting http resources from a https page.

Upvotes: 1

Related Questions