The src of img object doesn't work specificly for me

Question

im trying to make an src for an img element that i have in my HTML file, but for some reason, when I try to insert a source into an image, the workspace does not recognize the img object as an image object, and therefore does not allow src to be inserted there.

It is important to emphasize that this problem only exists in the work environment I work with (WebStorm). When I tried to put the code into an online work environment, it worked great.

My attempt to put src in WebStorm despite the problem like this:

HTML:

<img id="img" src="https://source.unsplash.com/random">

JS:

let img = document.getElementById("img");
img.src = "https:\/\/images.dog.ceo\/breeds\/terrier-toy\/n02087046_3843.jpg";

But it just made the work environment react with this error:

Cannot set properties of null (setting 'src')

@Antonio Pantano As you can see in the code below the title 'HTML', I do have an ```img```object whose id is 'img' — Mike Hemilton, Nov 02 '21 at 12:06
@Calculuswhiz here is my code: https://jsfiddle.net/c4xj81a2/ it works fine there, but not in my work environment — Mike Hemilton, Nov 02 '21 at 12:15
I'm pretty certain that this is because the script is running before your page loads. Wrap your script in a function (e.g. `init`) , then call the function with the `onload` attribute `...`. The web environments typically do this for you, I think. — General Grievance, Nov 02 '21 at 12:30
Does this answer your question? [How to make JavaScript execute after page load?](https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load) — General Grievance, Nov 02 '21 at 12:42
ok, what you mentioned didn't work, but When I did it directly with ```document.getElementById``` and not by an external variable, it suddenley worked... wierd.. — Mike Hemilton, Nov 02 '21 at 12:47
@Calculuswhiz sadly, the link you brought didn't answered me — Mike Hemilton, Nov 02 '21 at 12:48

Metro Smurf · Answer 1 · 2021-11-02T12:28:45.997

1

As written in the question, there are 2 (no, 3) options to fix the error.

Option 1: Normal string quote

img.src = "https://images.dog.ceo/breeds/terrier-toy/n02087046_3843.jpg";

Option 2: Add quotes around your original escaped character string

img.src = "https:\/\/images.dog.ceo\/breeds\/terrier-toy\/n02087046_3843.jpg";

Option 3: Set the attribute

img.setAttribute("src", "https://images.dog.ceo/breeds/terrier-toy/n02087046_3843.jpg");

edited Nov 02 '21 at 12:28

answered Nov 02 '21 at 12:08

Metro Smurf

37,266
20
108
140

1

as i said in my question, the work environment doesn't even recognize the ```img``` element as an image and not even alowing me to insert an src. in my project, the src DOES have the ' ' and stil not working – Mike Hemilton Nov 02 '21 at 12:22
@MikeHemilton - your original question **did not** have the string quoted. – Metro Smurf Nov 02 '21 at 12:23
yes i know. my apologize. i forgot to add it here, but now i say (and also mentioned it in my question), the problem is the fuct that the work environment doesn't recognize the ```img``` as an image element, so i also can't insert an src... :( – Mike Hemilton Nov 02 '21 at 12:28
@MikeHemilton - I added a 3rd option. But, I would also try changing the name of the `id` to something other than _img_: `` - just a wild guess that maybe your work environment is confused by the id value and img tag? – Metro Smurf Nov 02 '21 at 12:29
it turned out that the only way is by directly getting the element and do the change of source. it won't work if you keep the element in a variable and only then trying to change the src... – Mike Hemilton Nov 02 '21 at 12:56
1

@MikeHemilton you really need to post your complete code. What you're describing does not make sense. Please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). – Metro Smurf Nov 02 '21 at 13:15

score 0 · Answer 2 · answered Nov 02 '21 at 12:09

0

Check out this code. I've added setTimeout for 2 second just to visualize. You can remove setTimeout from here in your case.

function changeImage() {
  setTimeout(function(){
    var image = document.getElementById("img")
    image.src = "https://i.imgur.com/xNE8K6Q.jpeg"
  }, 2000)
}

changeImage()

<html>
  <body>
      <img id="img" src="https://i.imgur.com/hk1iahZ.jpeg" height="100" width="100" />
  </body>
</html>

answered Nov 02 '21 at 12:09

Pradip Dhakal

1,872
1
12
29

Instead of using `setTimeout()`, why not use the `onload` attribute on the `body`? – General Grievance Nov 02 '21 at 12:19
as i said in my question, the work environment doesn't even recognize the img element as an image and not even alowing me to insert an src. – Mike Hemilton Nov 02 '21 at 12:23

score 0 · Answer 3 · edited Nov 02 '21 at 16:01

0

Attributes of tags always has the string value so put your url as string. As per your code, you can try this:

let img = document.getElementById("img");
img.src = "https://images.dog.ceo/breeds/terrier-toy/n02087046_3843.jpg";

<img id="img" src="https://source.unsplash.com/random">

edited Nov 02 '21 at 16:01

General Grievance

4,555
31
31
45

answered Nov 02 '21 at 12:10

Yogendra

1,208
5
18
38

yes i know it's working here, but in my project specificly it just not. i don't know why – Mike Hemilton Nov 02 '21 at 12:18
can you update code and share in more details as your question not describe the actual problem – Yogendra Nov 02 '21 at 12:20
make sure you have a single field with id "img" – Yogendra Nov 02 '21 at 12:23
my code looks exactly like this, but the work enviroment does not recognize it for some reason – Mike Hemilton Nov 02 '21 at 12:36
that's exactly how my code looks like: https://jsfiddle.net/c4xj81a2/ it works perfectly in the online work enviroment, but not when i do it in my project in WebStorm. i really don't know what else to say – Mike Hemilton Nov 02 '21 at 12:50
check `$("#img").click(function(){alert("Hello")});` is working for you or not also try with dom – Yogendra Nov 03 '21 at 04:26

The src of img object doesn't work specificly for me

3 Answers3