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?
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.
Related
In a react App, I would like to store the image path or at least the name of the image file in DB. The image source would be dynamically added.
The below code works:
<img src={require("../Images/amazon.jpg")}></img>
The below code does not work (error:Cannot find module '../Images/amazon.jpg'):
const path = `../Images/amazon.jpg`;
<img src={require( `${path}`)}></img>
How can we set the img src dynamically after fetching image path/name from database.
If you have a public folder for assets, then you can try:
<img src={`../Images/amazon.jpg`}></img>
The best way is to just load your images from the URL.
<img src={url}></img>
I have my images folder under public folder. I use it in jsx like this:
<img src="/images/twitter.png" alt="twitter" />
This works.
But I have a problem in CSS's url.
background-image: url(/images/twitter.png); // compiler can't resolve this file.
The above doesn't work now. How do I make this work? I am not using webpack and don't want to use it for now.
Where is your css file located?
Is it in the same folder since you are writing the route identical to your code?
Answer: Check the route of your img.png relative to your css file. It can be the only problem.
Before i added the id of the object to the url the images loaded fine but once i added the ID The local images are not loading but url images work. Everything is returning fine in the console and it is the correct pathname.
I have tried using require but it just gives me a huge error with all of my images and some css.
I expect the corresponding image to show
This how the image file looks in my data
img: "img/product-8.94-1.png",
< img src={require(`../${img}`)} className="img-fluid"
alt="product"/>
This is the route and Link ( i added id)
<Route path="/details/:id" component={Details} />
<Link to={`/details/${id}`}>
Probably you are using relative paths to images in your app, if you changed route path from http://demo.com/details to http://demo.com/details/id the image cannot find the correct path, you got one extra folder details/id.
You don't show as how you get the path to the image, but if your image is in your assets folder of reactjs app, then import it like a component.
import img from "assets/image.jpg";
and then in component add it img src tag like this:
<img src={img} className="img-fluid" alt="product"/>
If you get images from db, then make sure you use full path to the image.
https://codesandbox.io/s/priceless-ardinghelli-sp0yg
I have a basic React app set up using the Create-React-App tool.
I have an images in my images folder:
/src/img/logo.png
I am including it in one of my component JS files (let's say it's located at /src/Login.js) like this:
import logo from "../img/logo.png";
I am embedding them into my code like this:
<img src={logo} />
When I look at the rendered page, I see that the "src" attribute of this image has a data URI. How can I get the app to generate a URL for this image instead of a data URI?
Why are you importing image with import, you can directly use path or take that path in one variable and than pass it to the src like this:
var imgUrl = "../img/logo.png";
<img src={imgUrl} />
Bear with me please, because I am a N00b.
I am creating an Ionic app with Firebase and AngularJS.
What I am trying to do is have a map load with the address location drawn from the database. (Being hard-coded is not an option) I can do this as an external link like this:
See Location
and it works, but it opens up to the web page google maps (which isn't practical for an app)
So, I have tried embedding the map in an iframe like this:
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
but I can't get it to work. My guess is because the iframe is "outside" of the page and not recognizing the dynamic data. Does anyone know how I can load the address dynamically into an embedded map, or is there a better way to do this using AngularJS? Ideally, I would like to have all the functions available in the app itself, even if this means having to go to a payed service. For now, though, I am trying to simply embed the map.
Thanks in advance!
Update1
I haven't found the fix yet, but I think I found the problem. In the console there is an error saying: "a trusted value is required" and then links to this, docs.angularjs.org/api/ng/service/$sce I will have to read over this and get back
Update 2
I added this to the Controller:
$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");
And changed the html to this:
<iframe
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="{{trustedURL}}" allowfullscreen>
</iframe>
This fixed the error "a trusted value is required", but I am still getting the same result - a map with a randomly generated location. It's not recognizing the dynamically loaded data in {{}}. Any thoughts???
Try to use ng-src instead of src
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
Use it like this:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Step 1
HTML Inside html use
[src]=methodToGetURL()
methodToGetURL: a function which return httl url from component file
EXAMPLE- iframe
[src]="methodToGetURL()" allowfullscreen /iframe'
Step 2) component file
Add DomSanitizer:
import {DomSanitizer} from '#angular/platform-browser';
function :
methodToGetURL() `enter code here`{
return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here');
}