We Keep Coding

How to embed image in a js file from url?

I wanna need to see this picture in my site from the below url
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoyZ-M6C9WpiR6MlWAZ0sNTiXsDWM8_ln3WA&usqp=CAU
And I wanna do this for my rest api project. After entering text instead of this my private textmaker link must show the result image like this in my website, this is What I needed! 🥲

function add_img() {
var img = document.createElement('img');
img.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoyZ-M6C9WpiR6MlWAZ0sNTiXsDWM8_ln3WA&usqp=CAU';
document.getElementById('body').appendChild(img);
}

I'm trying to display an image from my database, but the image wont populate the src of the img html attribute

I have an image saved to a database by converting to a byte array to a string then i am trying to remake the image on the view. But I wanted to make it for if the image was null(no image upload) that they will get a default "no image" image. But it seems when i try to make an if statement within my view with razor. The img src is not able to find the var in the if statement. The reason i need it to fill the src on the img outside of the if statement is because when i submit the form i need it to send the img data back to the action in the controller to reconvert it and save it on the database.
I trying a view different ways to fix it, the best i can do it make scripts inside my if statement. but it still will not connect to my img src.
<!--Remaking the image from a stromg to a char
array to a byte array to a imagefrom the
database to the original image-->
#if (Model.ImagePath != null)
{
char[] imageChars = Model.ImagePath.ToCharArray();
byte[] imageBytes = imageChars.Select(b => (byte)b).ToArray();
var base64 = Convert.ToBase64String(imageBytes);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
}
else
{
<script>
var img = getElementById("ImagePath");
img.src = "~/Content/no-image-icon.jpg";
getElementById("ImagePath").width = "100";
getElementById("ImagePath").height = "100";
</script>
}
<img id="ImagePath" alt=""/>
when i inspect the page the script has the image converted back into the right format it just wont send it to the img src.

You have:
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
That looks like it is setting img.src.src, which doesn't make sense. That should probably be this, correct? :
<script>
var img = getElementById("ImagePath");
img.src = "#imgSrc";
</script>
And you could also make sure to remove all line breaks:
<script>
var img = getElementById("ImagePath");
var imgSrc = "#imgSrc";
img.src = imgSrc.replace(/[\r|\n]/gm,'');
</script>
Also, as noted by Divya, your image element should come before your script tags, otherwise when you have getElementById("ImagePath");, it won't be able to find that element, since it has not loaded yet.

I figured it out i made a new vareriable in my model and added the string to it in my action that loads the page then just set that as the img src. Thank you for the help tho!

Preloading img and inserting src into another img without reloading it

I'm trying to preload an image via javascript and insert it into another image at the right moment without a new fetch.
Unfortuantely, when I replace the src of an img with the preloaded src, the image gets reloaded and chrome doesn't use the cashed one. What can I do?
This is how I preload the image:
if (document.images) {
this.img = new Image();
this.img.src = "img/img.jpg";
}
and later I'm inserting it like this:
this.poster.src = this.img.src;
Thanks!

Actually this code works fine. I was using a preprocessor that would prohibit caching. On the server everything works fine

Chrome - Image not loaded when loading from JS

I am trying to simply load an image on page load.
When i use a simple src it works ok:
<img src="url.png" />
But when I try to load it from my JS It does not load:
<img id="loadImage" src="" />
JS:
var _img = document.getElementById('loadImage');
_img.src = 'url.png';
The url is shown as 'not found'.
I am getting the same error as in this post : What does status=canceled for a resource mean in Chrome Developer Tools?
I cant seem to solve it, Why is that happening.

Why don't you try and save the whole image tag in a variable? This you you are not providing invalid HTML markup like empty src.
Just change your HTML to
<div id="imageholder"></div>
and use this code
$(document).ready(function() {
var image_1 = $('<img src="img/url.png" />');
$("#imageholder").append(image_1);
});
Take this fiddle and try :)
http://jsfiddle.net/aBF67/
NOTE: I'm using jQuery for that example :)

Try yo create a new Image object and assign it to the src attribute. Example:
var imgObj = new Image();
imgObj.src = "http://.....jpg";
var _img = document.getElementById('loadImage');
_img.src = imgObj;
I hope it helps.

Javascript canvas.toDataUrl() Send picture to an <img> element in a new window

What am I doing wrong here?
Im trying to save a canvas drawing by having it open a new window and displaying .png in an img element that is positioned on the page with css.
From there you will have the option to download it or share it.
I have this so far, but the img src is not being populated with the toDataUrl();
function saveDrawing() {
var url = canvas.toDataURL();
window.open('saveimage.php');
var placeholder = document.getElementById("placeholder");
placeholder.src = url;
}
Any thoughts? Thanks!

document.getElementById("placeholder"); is not looking for that ID in the newly opened window, but in the current one.
All you have to do is reference the newly created window's document:
function saveDrawing() {
var url = canvas.toDataURL();
w = window.open('saveimage.php');
w.onload = function(){
var placeholder = w.document.getElementById("placeholder");
placeholder.src = url;
};
}
This might have mistakes, the idea is that you store a reference to the new window in w, and then when it's loaded, access it's DOM to modify the image src