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"> </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.
35 Answers
This would be possible with plain CSS, using CSS variables and the CSS content attribute.
:root { --a1: url('); } img { content: var(--a1); }<img width="200" height="300" />Browser compatibility:
0There 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="">First set id for the image tag
then use JavaScript and set the src of image
const a1 = ' const image = document.getElementById("image"); image.src = a1;<!DOCTYPE html> <html> <body> <img src="" 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>images/wildlife/dog.jpg</var> <img src=""></img> <script type="text/javascript"> (function () { var path = document.getElementById("path").innerHTML; document.getElementById("event-1").src = path; })(); </script> </body> </html>
