How to load html file into iframe element in React?

Question

I want to load a local html file into an iframe element in React. I followed the accepted answer on this question, but it doesn't work.

The folder structure in my project is like below:

• src
  • components
    • myIframeComponent.js
  • testHTMLFiles
    • index.html

Iframe element looks like this:

 <iframe
   src="../testHTMLFiles/index.html"
   height="100%"
   width="100%"
   frameBorder="0"
 />

What am I missing?

Answer 1

The iframe src must contain an absolute url:

https://www.example.com/testHTMLFiles/index.html

This is because in your build the file is not avaliable at this position after build and iframe path is resolved as iframe is instanced.