2

I want to use a JavaScript variable which is equal to the url of an image in a html img tag. I need the following tag to be able to display the image that is tied to the variable.

document.getElementById("id-of-img-tag").src = imgVar;

document.getElementById("id-of-img-tag").innerHTML = imgVar;
<img id="id-of-img-tag" src=" " alt="img">

Both of the lines of JS result with the alternative being displayed for the img tag "img".

Turtle
  • 49
  • 1
  • 7
  • Are there any errors when you open the developer tools in your browser? – charmeleon Mar 22 '18 at 02:39
  • The first thing that jumps out at me is you are using `getElementById` to get the img element, but the element above has `id-of-img-tag` as the `class`, not the `id`. – Jason Schindler Mar 22 '18 at 02:41
  • No errors i have a console.log(imgVar); and it outputs the link to the image. and Yeah sorry typo but in the html file its id="id-of-img-tag" – Turtle Mar 22 '18 at 02:48
  • Possible duplicate of [Find Google+ avatar for given email address without OAuth](https://stackoverflow.com/questions/14243200/find-google-avatar-for-given-email-address-without-oauth) – zer00ne Mar 22 '18 at 03:11

2 Answers2

1

  1. You are using getElementById() method for <image class ="id-of-img-tag"...>. Try querySelector(".id-of-img-tag") instead.

  2. The second statement makes no sense. innerHTML will parse a string into HTML. imgVar is not a string nor is it even defined. imgVar should be just a simple string that literally represents the url of the image:

     var imgVar = "url of img"

  3. Assign imgVar to the src attribute of <img>

Demo

var imgVar = "https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";

document.querySelector(".id-of-img-tag").src = imgVar;
<img class="id-of-img-tag" src="" alt="img">
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Thanks this kind of worked however instead of the image is see [this](https://imgur.com/a/0IAQb) Do you know how to fix this? – Turtle Mar 22 '18 at 02:59
  • What's the exact url of image? – zer00ne Mar 22 '18 at 03:02
  • So its for a google sign in page im wokring on for my website and I want the users profile pic to be displayed so its a link to the user's propfile pic. (image size: 96x96 and its a jpg) [image](https://lh6.googleusercontent.com/-tJGLlnSh3Gw/AAAAAAAAAAI/AAAAAAAAAAA/AGi4gfxnWSDqsu5WxCNRA3TIruSc1qrXfA/s96-c/photo.jpg) – Turtle Mar 22 '18 at 03:06
  • If you mean the users profile pic like the ones we have here on this site? – zer00ne Mar 22 '18 at 03:07
  • yeah? but when google sends back the image it gives it as a var – Turtle Mar 22 '18 at 03:08
  • That looks pretty easy compared to dealing with oAuth, good luck, @Turtle – zer00ne Mar 22 '18 at 03:20
0

The answer lies in your HTML code. You have assigned the tag with a class of "id-of-img-tag", and then in your javascript, you are using getElementById(). Because there isn't an id called "id-of-img-tag" nothing is changed, and so the browser sees an 'empty' src and displays the alt image

Also in the code, you supplied you are not defining imgVar, which is returning the 'undefined' error which you show.

Here's a working example: 

<img id="id-of-img-tag" src="" alt="img">

let url = "https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg";

document.getElementById("id-of-img-tag").src = url;
Rick Brown
  • 21
  • 3