在标签属性中调用 JavaScript function

Question

How can we call an JavaScript function inside tag attribute?

 let imageURL = () => 'http://www.example.com/image.png';

 <img alt="error" src="javascript:imageURL()">

Answer 1

src accepts only url, you can place your function here: <img alt="Not available" src="whatever" onload="this.onload=null; this.src=imageURL();"/>

Answer 2

Use JavaScript to change the image src attribute:

 document.getElementById('myImage').src = 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg';

 <img alt="Not available" id="myImage" />

Answer 3

you can not run js function on attribute, try this function first it try to load placeholder, after placeholder loaded it then trigger JS function

<img src="https://thumbs.gfycat.com/RapidRadiantBug-small.gif" onload="this.onload=null; this.src=imageURL();" />

Answer 4

Use javascript to change image source, see my example:

 document.getElementById('image').setAttribute('src', 'https://media.wired.com/photos/5b8999943667562d3024c321/master/w_2560%2Cc_limit/trash2-01.jpg');

 <img alt="Not available" src="" id="image">