Question 419154 in Html Question posted in
Some basic documentation can be found here.

Html – How to obtain the *actual* URL of an image?

Consider the following html page:

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>

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?

Tags:

2

Answers


  1. 0 
    fetch("https://loremflickr.com/g/320/240/paris").then(r=>{
    console.log(r.url)
})

    this works here and logs https://loremflickr.com/cache/resized/defaultImage.small_320_240_g.jpg
    but resource can be not allowed to fetch and also fetch loads your image so you load it twice if use both <img src="{url}"> and fetch({url})

    Login or Signup to reply.
  2. 0

    I think loremflickr is in maintenance, i had a dummy list of items generated with faker and it worked fine until yesterday, now all images showing a black cat lazying around

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search