In my firefox addon, I want to show a local image named "image with:-2.png" in an HTML page. I have tried the following code:
<html>
<body>
<div id="images">
<!-- I am using Javascript's encodeURI function for encoding the URL. -->
<img src="image%20with:-2.png"></img>
</div>
</body>
</html>
but it says "Could not load image..."
After reading about URL encoding, I got to know that I need to escape ':' as well (encodeURI doesn't do that). So, I tried this:
<html>
<body>
<div id="images">
<!-- %3A UTF-8 HEX value of ':' is the -->
<img src="image%20with%3A-2.png"></img>
</div>
</body>
</html>
but it didn't work either.
If I rename the image to "image with-2.png" & change the src to "image%20with-2.png", then it works fine.
So, my question : what do I need to do in order to show images which have ':' in their names?
Thanks in advance.
Related
Im working with Nasa's Astronomy Picture of The Day and I've managed to pull the description of the picture, the title of the picture, and who is credited with taking the picture. The only thing I am missing is the center piece itself, the actual picture from Nasa. I have been able to get ither images to load just fine, but this project is mainly pictures and none of them seem to want to work for me. When looking at my console I keep getting a 404 error that reads
"GET https://apod.nasa.gov/apod/image/2004/WindmillStarTrails1024.jpgstyle='width:100%'/ 400 (Bad Request)"
I believe its an error getting the url of the picture but I am not sure how to fix it. I have been successful in getting other pictures to work out and have formatted this one in the exact same way, so I am not sure what makes this picture different from the others if it is. Below is the HTML with the script that I used.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NASA API Demo </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="output">
<thing id="img"></thing>
<p id = "copyright"> </p>
<h1 id = "title"></h1>
<p id="explanation"> </p>
</div>
<script>
fetch('https://api.nasa.gov/planetary/apod?api_key=(My Key Here)
.then((response) => {
return response.json();
})
.then((endUpWith) => {
document.getElementById("img").innerHTML="<img src=" +endUpWith.url+ "style='width:100%'/>";
document.getElementById("copyright").innerHTML="By " + endUpWith.copyright;
document.getElementById("title").innerHTML=endUpWith.title;
document.getElementById("explanation").innerHTML=endUpWith.explanation;
});
</script>
</body>
</html>
Inspect the element you added to the page. It is going to look like
<img src=https://apod.nasa.gov/apod/image/2004/WindmillStarTrails1024.jpgstyle='width:100%' />
Because you are not using quotes and the url is hooked up to the style attribute. Add quotes around the source, add a space.
"<img src='" +endUpWith.url + "' style='width:100%'/>"
^ ^^
I would invert from double quotes to single ones, at least for this line:
document.getElementById("img").innerHTML='<img src="' +endUpWith.url+ '" style="width:100%"/>';
Easier to read. Actually, I would recommend to treat JS strings with single quotes.
I am getting a mail body encoded in base64:
PCFET0NUWVBFIGh0bWw-PGhlYWQ-PG1ldGEgbmFtZT0iY2hhcnNldCIgY29udGVudD0idXRmLTgiPjx0aXRsZT48L3RpdGxlPjwvaGVhZD48Ym9keT4NCg0KICAgICAgICAgICAgPGRpdiBhbGlnbj0iY2VudGVyIj4KICAgICAgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9jYW1wYWlnbnMvZGozOTR5a2hwMzkyYy90cmFjay11cmwvYXczNTFheGJ0djdmNi85YzE4NzI5NDQ1ZGNjYTM2ZTQ1ZWZjMGRhYTRjOTRiZTE4YjE5OGFhIj48aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4KICAgIDwvZGl2PjxkaXYgc3R5bGU9InRleHQtYWxpZ246Y2VudGVyOyI-WW91IGNhbiBzaW1wbHkgV0lQRSBPdXQgeW91ciBlbWFpbCBmcm9tIE1haWxpbmcgTGlzdMKgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9saXN0cy9sYzczMTdoYWhnM2Q4L3Vuc3Vic2NyaWJlL2F3MzUxYXhidHY3ZjYvZGozOTR5a2hwMzkyYy8zIiB0YXJnZXQ9Il9ibGFuayI-IGNsaWNrIGhlcmUgPC9hPjwvZGl2Pgo8aW1nIHdpZHRoPSIxIiBzcmM9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stb3BlbmluZy9hdzM1MWF4YnR2N2Y2IiBhbHQ9IiIvPjwvYm9keT48L2h0bWw-DQoNCg==
I have an html page:
<a href="data:text/css;base64,PCFET0NUWVBFIGh0bWw-PGhlYWQ-PG1ldGEgbmFtZT0iY2hhcnNldCIgY29udGVudD0idXRmLTgiPjx0aXRsZT48L3RpdGxlPjwvaGVhZD48Ym9keT4NCg0KICAgICAgICAgICAgPGRpdiBhbGlnbj0iY2VudGVyIj4KICAgICAgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9jYW1wYWlnbnMvZGozOTR5a2hwMzkyYy90cmFjay11cmwvYXczNTFheGJ0djdmNi85YzE4NzI5NDQ1ZGNjYTM2ZTQ1ZWZjMGRhYTRjOTRiZTE4YjE5OGFhIj48aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4KICAgIDwvZGl2PjxkaXYgc3R5bGU9InRleHQtYWxpZ246Y2VudGVyOyI-WW91IGNhbiBzaW1wbHkgV0lQRSBPdXQgeW91ciBlbWFpbCBmcm9tIE1haWxpbmcgTGlzdMKgPGEgaHJlZj0iaHR0cDovL25saWMuc3BlZWRvbWFpbGh1Yi5pbi9saXN0cy9sYzczMTdoYWhnM2Q4L3Vuc3Vic2NyaWJlL2F3MzUxYXhidHY3ZjYvZGozOTR5a2hwMzkyYy8zIiB0YXJnZXQ9Il9ibGFuayI-IGNsaWNrIGhlcmUgPC9hPjwvZGl2Pgo8aW1nIHdpZHRoPSIxIiBzcmM9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stb3BlbmluZy9hdzM1MWF4YnR2N2Y2IiBhbHQ9IiIvPjwvYm9keT48L2h0bWw-DQoNCg==" />See html</a>
which on clicking See html opens a file with html written in the form of text:
<!DOCTYPE html>
<head><meta name="charset" content="utf-8">
<title></title>
</head>
<body>
<div align="center">
<a href="http://nlic.speedomailhub.in/campaigns/dj394ykhp392c/track-url/aw351axbtv7f6/9c18729445dcca36e45efc0daa4c94be18b198aa">
<img alt="" src="http://hasq.speedomailhub.in/sk55119gb8900/dj394ykhp392c/vq015xz7ba1c2_1.png"></a>
</div>
<div style="text-align:center;">You can simply WIPE Out your email from Mailing List click here
</div>
<img width="1" src="http://nlic.speedomailhub.in/campaigns/dj394ykhp392c/track-opening/aw351axbtv7f6" alt=""/>
</body>
</html>
How do I show this as an actual html file, just like it shows on run code instead of just plain html text.
Is there any way I can directly convert the base64 to an actual html page. IS it possible with python?
Use it with iframe. Simply make sure you use the correct data (data:text/html;charset=utf-8;base64) and that you have a valid converted HTML
iframe {
border:none;
width:100%;
height:1000px;
}
body {
margin:0;
}
<iframe src="data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPjxtZXRhIG5hbWU9ImNoYXJzZXQiIGNvbnRlbnQ9InV0Zi04Ij4NCiAgPHRpdGxlPjwvdGl0bGU+DQogIDwvaGVhZD4NCiAgPGJvZHk+DQogICAgPGRpdiBhbGlnbj0iY2VudGVyIj4NCiAgICAgIDxhIGhyZWY9Imh0dHA6Ly9ubGljLnNwZWVkb21haWxodWIuaW4vY2FtcGFpZ25zL2RqMzk0eWtocDM5MmMvdHJhY2stdXJsL2F3MzUxYXhidHY3ZjYvOWMxODcyOTQ0NWRjY2EzNmU0NWVmYzBkYWE0Yzk0YmUxOGIxOThhYSI+DQogICAgICA8aW1nIGFsdD0iIiBzcmM9Imh0dHA6Ly9oYXNxLnNwZWVkb21haWxodWIuaW4vc2s1NTExOWdiODkwMC9kajM5NHlraHAzOTJjL3ZxMDE1eHo3YmExYzJfMS5wbmciPjwvYT4NCiAgICA8L2Rpdj4NCiAgICANCiAgICA8ZGl2IHN0eWxlPSJ0ZXh0LWFsaWduOmNlbnRlcjsiPllvdSBjYW4gc2ltcGx5IFdJUEUgT3V0IHlvdXIgZW1haWwgZnJvbSBNYWlsaW5nIExpc3TDgiA8YSBocmVmPSJodHRwOi8vbmxpYy5zcGVlZG9tYWlsaHViLmluL2xpc3RzL2xjNzMxN2hhaGczZDgvdW5zdWJzY3JpYmUvYXczNTFheGJ0djdmNi9kajM5NHlraHAzOTJjLzMiIHRhcmdldD0iX2JsYW5rIj4gY2xpY2sgaGVyZSA8L2E+DQogICAgPC9kaXY+DQogICAgDQogICAgPGltZyB3aWR0aD0iMSIgc3JjPSJodHRwOi8vbmxpYy5zcGVlZG9tYWlsaHViLmluL2NhbXBhaWducy9kajM5NHlraHAzOTJjL3RyYWNrLW9wZW5pbmcvYXczNTFheGJ0djdmNiIgYWx0PSIiLz4NCiAgPC9ib2R5Pg0KICANCiAgPC9odG1sPg=="></iframe>
if you want to convert a base64 file try by using a third party web like https://www.base64decode.org/ but what the file is supposed to be for? it seem like it's corrupted.. where do you get it/how do you created it?
You can't convert image to html, only you can do it's just parse text from this image, But not all text will be parsed correctly.
you can try this approach Scan and extract text from an image using Python libraries
What you ask, this work can done HTML Coder
I'm beginning my adventure with the Javascript. I stuck in one part of my code. I would like to change assignations of file name to the src attribute in html element. I create the file name in a external function and then I pass it to the function setting new src attribute. I don't understand why it doesn't work. When I assign an exact file it works. Could someone explain it to me ?
Below is the code:
index.html
<html>
<head>
<script type="text/javascript" src="navContent.js"></script>
</head>
<body>
<nav>
<ul>
<li>
newFile
</li>
</ul>
</nav>
<p id="demo"></p>
<section class="description">
<h2 id="nevTitle"></h2>
<script id="nevDescript" src=none></script>
</section>
</body>
</html>
navContent.js
function showDescriprion(chosenNav){
var idDescript = document.getElementById("nevDescript");
document.getElementById("nevTitle").innerHTML=chosenNav;
idDescript.setAttribute("src", chosenNav.toLowerCase().concat(".js"));
//checking
document.getElementById("demo").innerHTML=idDescript.getAttribute("src");
}
newfile.js
document.write(
<dl>\
<dt>Uni</dt>\
<dd>Des</dd>\
</dl>);
The problem is here: <script id="nevDescript" src=none></script>. When I write src="newfile.js" it works. I want to avoid doing the switch-case. That's why I'm doing the function showDescriprion(chosenNav)
What you are trying to do is adding a new script dynamically, try searching more information about it. You could start here - https://www.danielcrabtree.com/blog/25/gotchas-with-dynamically-adding-script-tags-to-html - you find some tips and also an warning that a document.write call won't work in this case(also, you forgot to use quotes). You can also look this previous question at Loading scripts after page load?, the answer that #Nicolas Bouvrette and #Johannes H. posted will not require the use of any additional library.
I just want to bring image whenever i press css button but image is not coming. what can be wrong in this?
<html>
<head>
<script >
function create() {
var x = document.createElement("IMG");
x.setAttribute("src", "C:\Users\jai guru umesh\Desktop\webops\sha\fronthead images\rover0.png");
document.body.appendChild(x);
};
</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/>
</body>
</html>
Your error is in setAttribute function, you can't use this kind of path in web browsers as it works on client's pc and this would mean you could access their storage, which would be huge privacy concern.
You should use images locally from your file, either in same file as this html file, or in a subfolder, e.g. .../img (where ... is folder which contains html file). Then you can use relative path:
x.setAttribute("src", "img/rover0.png"); // this should work on any system
You can use / for windows paths too, but if you want to use \, make sure to use \\.
But if you insist on absolute file path, use this:
x.setAttribute("src", "file:///C:\\Users\\jai guru umesh\\Desktop\\webops\\sha\\fronthead images\\rover0.png");
Note the use of file:/// and \\ (using / instead \\ should work as well)
You could load the image with the page and hide it until a user clicks on it.
<html>
<head>
<script >
function showImage(image) {
image.style.display = "inline";
};
</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css" onclick="create()"/>
<img src="../fronthead images/rover0.png" style="display:none;" onclick="showImage(this)" />
</body>
</html>
Also I changed your path to a relative path since browsers will not allow access to your HD.
Use relative path (absolute if you have a link):
x.setAttribute("src", "../image.png");
In surplus, I suggest you to pay attention to the directory names (e.g fronthead images) it's better not use special characters and blank spaces (so "fronthead images", it's better in thi form "frontheadImages", or "fronthead_images")
i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.