考虑以下 html 页面：
function correctTitle() {
const imageElement = document.getElementById('image');
const titleElement = document.getElementById('image-title');
titleElement.textContent = 'Image URL: '+imageElement.getAttribute("src");
}<!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>
</body>
</html>这会从网络加载图像并显示它，然后更新其标题以显示其 URL。 该图像通过其 URL 引用： https://loremflickr.com/g/320/240/paris
但是，当直接在浏览器中打开图像（通过单击）时，浏览器的地址栏会显示其实际 URL： https://loremflickr.com/cache/resized/defaultImage.small_320_240_g.jpg
我应该如何修改代码以显示实际的 URL，而不是用作参考的 URL？
fetch("https://loremflickr.com/g/320/240/paris").then(r=>{
console.log(r.url)
})
这在这里工作并记录
https://loremflickr.com/cache/resized/defaultImage.small_320_240_g.jpg<img src="{url}">fetch({url})