1

I would like to know. Is it possible to set a variable in html and use that variable as the img src. I would be using the same image regularly and don't want to update it in ever tag each time I change it. I am new to Javascript and HTML.

I have tried this but knew it would not work. But tried it anyway.

<body>

<var a1>images/wildlife/dog.jpg</var>

<img src="var a1" id="event-1">

</body>

The image path is correct as it displays the image if i use that exact path as the src="..."

Can some please point me in the direction to accomplish this. I do not know alot about php and MySql.

Improve this question
3
  • you'd need to use javascript, not HTML Commented May 7, 2020 at 10:09
  • HTML is not programming language, so it's not possible to have any logic in it. Why you need this variable? Why not directly put it as <img src="images/wildlife/dog.jpg"/>? Commented May 7, 2020 at 10:09
  • Thank you. Because I want to use the same image 3 times on different part in the html document. When I update the image I only want to do it once instead of go and find every tag and update it. Commented May 7, 2020 at 10:19

5 Answers 5

Reset to default
4

This would be possible with plain CSS, using CSS variables and the CSS content attribute.

:root {
  --a1: url('https://placehold.co/200x300');
}

img {
  content: var(--a1);
}
<img width="200" height="300" />

Browser compatibility:

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

There are no variables in HTML as stated in comments. Here's how you could this in javascript.

const a1 = "images/wildlife/dog.jpg";
const image = document.getElementById("event-1");
image.src = a1;
<img src="" id="event-1">

Improve this answer

Comments

1

First set id for the image tag

then use JavaScript and set the src of image 

 const a1 = 'https://nodejs.org/static/images/logo.svg';
    const image = document.getElementById("image");
    image.src = a1;
<!DOCTYPE html>
<html>

<body>
       <img src="" id="image" height="150px" width ="150px">
</body>
</html>

Improve this answer

Comments

0

You can achieve that with some JavaScript code

  1. Assign an id to the image tag - #img1

  2. Write your JavaScript code that would execute immediately your website loads ----------

    window.onload = Window_OnLoad; function Window_OnLoad () { }

  3. Inside the function in STEP 2 (Window_OnLoad), declare a variable and assign your image source to it ----------

    const imgSrc = "imgpath.png"

  4. Now call get the img id in STEP 1 and assign the path to it like---------

    document.getElementById("img1").src = imgSrc

You can assign the variable, imgSrc to different image tags. When you have to change it, you can change only the variable value. That should do it

Improve this answer

Comments

0

Maybe this is another answer to your question. All img with "event-id" will get the same .jpg file applied to it stated in var

<!DOCTYPE html>
<html>
<body>
<var id="path">images/wildlife/dog.jpg</var>

<img src="" id="event-1"></img>

<script type="text/javascript">
(function () {
  var path = document.getElementById("path").innerHTML;
  document.getElementById("event-1").src = path;
})();
</script>

</body>
</html>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.