Consider the following html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id="image-title">Loading...</h1>
<a href="https://loremflickr.com/g/320/240/paris">
<img id="image" src="https://loremflickr.com/g/320/240/paris" onLoad="correctTitle()")>
</a>
<script>
function correctTitle() {
const imageElement = document.getElementById('image');
const titleElement = document.getElementById('image-title');
titleElement.textContent = 'Image URL: '+imageElement.getAttribute("src");
}
</script>
</body>
</html>
This loads an image from the web and displays it, then updates its title to show its URL.
The image is referenced by its URL:
https://loremflickr.com/g/320/240/paris
However, when opening the image directly in the browser (by clicking on it), the address bar of the browser shows its actual URL:
https://loremflickr.com/cache/resized/defaultImage.small_320_240_g.jpg
How should I modify the code to display the actual URL, and not the URL used as reference?