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 acplish this. I do not know alot about php and MySql.
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 acplish this. I do not know alot about php and MySql.
Share Improve this question asked May 7, 2020 at 10:06 Lotriet36Lotriet36 211 gold badge1 silver badge2 bronze badges 3- you'd need to use javascript, not HTML – Jaromanda X 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"/>? – Justinas 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. – Lotriet36 Commented May 7, 2020 at 10:19
5 Answers
Reset to default 4This 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 patibility:
- CSS variables
- Content
There are no variables in HTML as stated in ments. 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">First set id for the image tag
then use JavaScript and set the src of image
const a1 = 'https://nodejs/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>You can achieve that with some JavaScript code
Assign an id to the image tag - #img1
Write your JavaScript code that would execute immediately your website loads ----------
window.onload = Window_OnLoad; function Window_OnLoad () { }
Inside the function in STEP 2 (Window_OnLoad), declare a variable and assign your image source to it ----------
const imgSrc = "imgpath.png"
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
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>