How to get image url

How to Find the Codes or URLs for Web Images

Find the exact location of an image online

Maskot / Getty Images

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

A common scenario online is that you have an image on your website that you want to link to. Perhaps you are coding a page on your site, and you want to add that image, or maybe you want to link to it from another site like a social media account that you have. In either case, the first step in this process is to identify the URL (uniform resource locator) of that image. This is the unique address and file path to that specific image on the Web. Let’s take a look at how this is done.

Getting Started

Now that you understand the «gotchas» of image linking, we will want to identify which browser you’ll use. Different browsers do things differently, which makes sense since they are all unique software platforms created by different companies.

Finding Web Image Code Using Chrome

For the most part, browsers all work somewhat similar these days. In Google Chrome, this is what we would do:

Find the image you want.

Right-click that image (Ctrl+click on a Mac).

A menu will appear. From that menu, select Copy Image Address.

If you paste what is now on your clipboard, you will find that you have the full path to that image.

Using Other Browsers

In Internet Explorer, you right-click on the image and choose Properties. From that dialog box, you will see the path to this image. Copy the address of the image by selecting it and copying it to your clipboard.

In Firefox, you would right-click on the image, and choose copy image location.

Mobile devices are even trickier when it comes to finding a URL path, and since there are so many different devices on the market today, creating a definitive list of how to find an image URL on all platforms and devices would be a daunting task. In many cases, however, you touch and hold on an image to access a menu that will allow you to save the image or find its URL.

Once you have your image URL, you can add it to an HTML document. Remember, this was the whole point of this exercise, to find the image’s URL so we could add it to our page! Here’s how to add it with HTML. Note that you would write this code in whichever HTML editor you prefer:

Between the first set of double quotes, you would paste the path to the image you want to include. The alt text’s value should be descriptive content explaining what the image is for someone who may not actually see it on the page.

Upload your web page and test it in a web browser to see if your image is now in place!

Useful Tips

Width and height attributes are not required on images, and they should be excluded unless you always want that image to be rendered in that exact size. With responsive websites and images that reflow and resize based on screen size, this is rarely the case these days. You are likely better off leaving the width and height off, especially since In the absence of any other sizing info or styles) the browser will display the image in its default size anyway.

How to get URL of an image in JavaScript?

I’m developing a Chrome extension, and I’m adding an onmouseover handler to each of the images on a page. When the user mouses over an image, it’s URL should be stored in a variable. I know I can easily get the value of the src attribute of the image, but I want the full URL. The src attribute stores the path of the image on the server. For example, when you right click an image in Google Chrome, you get the «Copy Image URL» option, which copies the image’s URL to the clipboard.

Is there any way to achieve this? Thanks.

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

You can use window.location to get the page you are currently on and the following will give you the URL parts you need:

So the TL;DR is this:

This is how I thought about solving the problem in the most basic steps:

Here are how each of those solutions looked:

An IFFE is a great way to get a function to fire without having to worry about polluting the name space.

An event listener that could fire anywhere would have to be attached to the window or the document.

*To figure out which element the mouse if currently over you would use Event.target. The MDN definition for that is: *

*So the code would then look like this: *

Once you get the logic done and you have properly selected the element, then you can use element.src to get the source URL.

You can do this anyway you want, but I played around with instantiating an object since it sounded like the value would need to change often, but you didn’t necessarily need to store previous values.

And so the final product could be something like this

Direct link to a hosted image in email signatures

This article was updated on June 15, 2021

You might wonder how direct image links or direct URLs are related to email signatures. If you can use an embedded image, you do not have to worry about any links. However, linked images have some upsides: for example, they don’t increase the email size. What is more, there are situations in which linked images are the only available option. To add a linked image, you need a direct URL to it.

Mind that it is always better to host images for email signatures on your own servers. If you do not own a server, your best bet is to use an image hosting service. The article below presents how to get a direct link in some popular image and file hosting services. As you will see, it requires more than just right-clicking the image and choosing copy image address. Click the name of an image hosting service below to learn how to get a direct image URL:

Mind that all specified methods work at the moment of writing this article, but there is no guarantee the procedure will not change in the future.

How to get a direct image link in Google Drive

Google Drive might be the most complicated image hosting service. At least if you want to get a direct link.

Troubleshooting direct Google Drive links

If you’ve followed all the steps above and the direct URL still doesn’t work, you need to change some settings.

How to get a direct image URL in OneDrive

Getting the direct link from OneDrive is much quicker, does not require using any developer tools or URL hocus-pocus. However, it doesn’t work in OneDrive for Business.

How to get a direct image link in Dropbox

Getting a direct link in Dropbox also requires a simple trick.

How to get a direct picture URL in Imgur

In comparison with other image hosting services, getting a direct URL is a child’s play.

How to get a direct URL to an image in Flickr

In Flickr, direct image links are visible without any elaborate tricks.

How to use the direct image link in an email signature

Getting your graphics online is the first step. The next one is to use those files in practice. Below, you can see how to use them to create your own, professional email signature using direct image links.

A few good tips:

129 thoughts on “ Direct link to a hosted image in email signatures ”

I’ve used the one drive method, the image loads perfectly in outlook, however if i delete anything of the end of the link as suggested in your guide, the image no longer works.

Thanks for noticing, Adam!
I’ve just checked a few links from OneDrive, and it seems there have been some changes to how direct links work – after deleting attributes, they don’t work. I removed the final step from the OneDrive instruction.

Hi can you help me convert my logo and banner

Here you go:
https://drive.google.com/uc?export=view&id=1K2tqz6mfNhYPv6i1bjE7L9aerduJvRF_
https://drive.google.com/uc?export=view&id=1xVnBQlEt6wCSAw7fkly0xI7mLB6zv7oo

hello,
can you help me to convert to direct link for banner

Hi,
here are the links for the logo:
https://drive.google.com/uc?export=view&id=1RgcSpKLN-yWqcm2-bmwdCLKvHB6YSy5m
and the banner:
https://drive.google.com/uc?export=view&id=1vAjhvwirHWGcPoH-LDz7TSz0kld2oGaW

Hi Kamil,
Found your article and has been extremely helpful, thank you! Able to create direct link and image shows in my signature. But when I check the sent email and what the recipient sees, it’s just the image icon with an outline of the rectangle (where the image should be).
For Share, our company settings are only “Restricted” and “Company”. There is no option for “anyone on the internet…” Is this the reason?
Thanks

I’m afraid that your company might not allow you to create public links. You can use a private Google account instead of the Google Workspace.

Here you go:
https://drive.google.com/uc?export=view&id=1W81-mmqRP5jEtqhgIv_znGBxpLBFFve1

Nice post Kamil! I used the Dropbox method. Worked perfectly when following the directions.

It may help for folks to know the full workflow.

1. In Dreamweaver (which I used to create the signature code), I replaced the image link with the one generated as you described.
2. I next pressed the “Preview in browser” button to publish the preview in Safari.
3. Finally, I highlighted and copied that preview, then pasted into the email signature fielding in settings in OWA.

It works perfectly so far (fingers crossed!).

hi thanks for your helpful blog
i edited the dropbox link as you explained.
so i changed dl=0 to raw=1 the question is should i use the link with raw=1 in my html email or the link that it generates when i copy paste it into browser.
because i tried to use the link that it gave me by copy pasting the raw=1 version into the browser but after a few hours the link was broken. are they random links?

You should use the link with the raw=1 part. If you use the URL it redirects to, it will always break after a while. The same if you right-click and choose “copy image address” in DropBox or Google Drive. When I first saw this, I was quite surprised. It took me a while to find the link format that doesn’t break and can work with email signatures.

when I shorten my Google Drive link, the link displays a broken question mark symbol when composing an email. Where have I gone wrong?

That’s because shortened links are not direct links. They won’t work in email signatures. The only way to make your Google Drive link work is to you convert it to direct one and make sure the privacy options are set to “generally available”.

Thank You. Working like charm.

Google drive, Image hosting.

Excelente articulo. Muchas gracias, Un saludo

We are unable to get the direct link to Gdrive to work. Please help.

Here is the link Thank you.

Here you go:
https://drive.google.com/uc?export=view&id=10P_Vhw9HsMZor7pMSNnXYUoc41P1zP9D

Hi I used Google drive to generate a direct link to my logo, which worked at my end. The email generator worked fine, but when I send out an email on gmail with the email signature attached, the logo does not display at receivers end. So incredibly frustrating. I’ve spent hours at this!

If your recipient doesn’t add your address to the safe senders’ list, they usually need to use a dedicated option to display your images. Then, both your images and social media buttons will not appear right away.
And if the recipient can see your social media buttons and cannot see the logo – it might mean that you have either used a shareable URL, or the image’s privacy options aren’t set to Available for everyone on the Internet and Viewers and commenters can see the option to download, print, and copy

Can you please convert this to a direct link? Thanks!

Hi,
The direct URL to this image is: https://drive.google.com/uc?export=view&id=1q683OTzIPd90n-Ks7yQZ_cM_vaqki1Nj

Hi Kellie,
Here is the direct link to this photo:
https://drive.google.com/uc?export=view&id=1LtAemipHMlvTLrSdEBRYtCtuCMnAKXUU

Got it to work when I put the signature in Outlook, woo! Thanks for the informative article!

On a previous post you mentioned it is not recommended to use an email signature that is all one image. That is what I was hoping to do. Will it not work properly using one of these options?

It should work, but that doesn’t make it a recommended option.
Image-only email signatures make it impossible to copy any signature details straight from an email, can contain only one link (on the whole image) have the tendency of being blocked by email clients (and are rarely unblocked by recipients) are extremely screen-reader-unfriendly. What’s more, text included in such emails tends not to scale correctly. And that’s only some of the arguments against.
The only upside of such a signature (as long as it is actually displayed) is that its layout will not break, regardless of the target email client. However, it applies to correctly HTML-coded email signatures as well.

My shareable Google Drive link looks like this: Hello! My shareable Google Drive link looks like this: https://drive.google.com/file/d/1dixPakx-Le1EwkpdPrsUYMXk99CedHoa/view?usp=sharing.

How do I turn that into a direct link?

Thanks in advance for your help!
Carlos

Hello Carlos,
The direct URL is: https://drive.google.com/uc?export=view&id=1dixPakx-Le1EwkpdPrsUYMXk99CedHoa

Ehi, ho problemi a ottenere il link corretto per Google Drive
https://drive.google.com/file/d/1fjGEDTVW0aJEmvQrSr1aJ6exT3Z8WqhH/view?usp=sharing
Questo è il collegamento … come posso ottenere un collegamento diretto?

this is the link thats with me 🙁 please help

The direct URL for the image is:
https://drive.google.com/uc?export=view&id=1pBFZ6OTtR-YfAby2jPYc712QhYc8rvSG

Hey I’m having trouble getting the correct link for Google Drive

That is the link…how to I get a direct link?

The direct link for this image is:
https://drive.google.com/uc?export=view&id=1t2Eo9gM-fUnyYvjVLxXuZ4aXVCtBlX8j

Thank you for this post! It is super helpful. I was wondering if you know the trick for Box. Unfortunately, my work uses Box, and I didn’t find any useful information online on how to get the direct URL from Box. Thank you in advance!

Here is the solution in case others need it:
1. Go to the folder where your picture is located in the Box folder.
2. Click “Share”, and then a new window comes up. Create the share link.
3. Change the option for the shared link to “People with the link”
4. Go to Link Settings
5. The bottom of that window contains the Direct Link. Click Copy and there you have your direct link.

Thank you for the quick tutorial!

I’m trying this at yahoomail

Those are the correct formats for direct links, they seem to work just fine. Mind that it is not recommended to use an email signature which is only a single image.

Hello, I have been trying to get the image to appear in the signature. I have tried both Dropbox and Google Drive but it’s not working. They do not show up. Just a cracked or a corrupted logo of JPG. This is the link for the same image saved in said cloud storage.

That’s because you are using the shareable links, instead of direct URLs.
Direct URLs for those images would be:
https://www.dropbox.com/s/bi130xnmq14b31k/provisionsSupplies_logo_black.png?raw=1
and
https://drive.google.com/uc?export=view&id=1nXfrC_1AMyhiSXL9MbRgROd-1SZwpITC

Hi,
how to convert please help me out

Hi,
Here you go:
https://drive.google.com/uc?export=view&id=1jgmN5oftUsEI-gWjasW8RRmJ1UoE_6rj

In the posts could not find such an issue.
I use google drive as onedrive did not work. I would say the onedrive and google drive has the same issue.

I shared the link. corrected as per Your instructions. When I copy link in browser – the logo shows.

What could be the issue?

The same is for onedrive and google drive.

Thank in advance.

Hello Martins,
First, check in Google Drive if the image’s visibility is set to “everyone on the Internet”. Although it might seem as the same as “anyone with the link can view”, the latter option will always break the image.
Next, does it happen to all recipients? Could you check if the image shows when you send an email to a Gmail user, for example? It could break only because the recipient filters out images by default.

Logo not appearing….

Try the direct URL, instead:
https://drive.google.com/uc?export=view&id=1hFcGhgPU09gH61Zfp8FhNGGldL1Yj3HB

wonderful post, very informative. I wonder why the other specialists of this sector don’t notice this. You must continue your writing. I’m confident, you have a huge readers’ base already!

Kindly get direct link for the below link

Here you go:
https://drive.google.com/uc?export=view&id=13t-Us9j_X6zsqdLQ7DWhtf6q8baCzIy2

It is very nice to read your site, thank you very much for your work, it’s great!

Hi
My shareable Google Drive link looks like this:

Hi Mary,
Your direct URL is as follows:
https://drive.google.com/uc?export=view&id=1qWZ9vM_XEdcankjo14glY68KdYvkdBy3

I am thankful that I observed this web blog, just the right info that I was looking for!

Wow, wonderful article and I get the answer from your reply to the comments.
Thanks a million, Kamil

Worked beautifully! I have 100s of images I need uploaded to a CMS using a CSV file, but It could not pull in the google drive images. This fixed the problem and saved me thousands of hours uploading one at a time.
Thank you!

What would be the reason why my image is showing up when I create my signature here (using my OneDrive), but when I paste it in outlook signature, it’s not showing there?

Hi Michelle,
It seems that Outlook is picky about those URLs. But if you use the URL without attributes (the question mark and everything to the right from it) the image should show up without any problems.

Hello!
How do I embed an animated banner? It only allows me to upload images.
Thank you for your help.

Hello Ananya,
Following the steps from the article allows you to upload any kind of graphic file that can be used in email signatures. Including an animated gif. Using an animated gif in the signature is the same as using a standard *.png image.
However, all the steps apply to hosted, online images. If you want to use an embedded image/animation, the instruction will be different for every email client. And not every email client allows you to use embedded images.

I figured it out, thanks.

That’s right, glad you figured it out!

Need help with converting direct link

I think that’s the direct link that I have generated, it’s not displaying either. Please help

Are you able to create signatures for Gmail App on Android? (Samsung specifically?

Hi Roshi,
Unfortunately, it seems like this feature is still waiting to be introduced in Android.

Hello! My shareable Google Drive link looks like this: https://drive.google.com/open?id=1UPZX0R1aHGWAygKjopDEYFlocZTux3oz How do I turn that into a direct link?

I also tried using OneDrive, but “embed” was not an option when I right-clicked.

Thanks for your help!

Hello,
Your direct link looks like this:
https://drive.google.com/uc?export=view&id=1UPZX0R1aHGWAygKjopDEYFlocZTux3oz
The embed option is not available in OneDrive for Business, otherwise – it should be there.

Thanks for this! I’ve been struggling with this for a while.

Hello, thank you so much for the tutorial!

& this is my “converted” url:
https://drive.google.com/uc?export=view&id= 1OpEi7koyZEyWF7VV2DfU54qmfnCVwAGw

It doesn’t seem to work in my code. I get: Not Found Error 404 when I put the link in the google

Hi Robyn,
It seems you put a space between the first part of the link and its id, try this one:
https://drive.google.com/uc?export=view&id=1OpEi7koyZEyWF7VV2DfU54qmfnCVwAGw

Hi Kamil, I accidentally stumbled upon this thread in my Google search of trying to solve my problem, which is as follows: When I originally set up my e-mail signature a couple of years ago on my Gmail account, I had an image of my company logo which I stored on my Google drive account and I was able to insert this image with no problem. A few months ago, this image is now showing up as a “broken link” every time I compose a new e-mail. I went through all of your steps to create the direct link and tried to re-insert this image into the signature using the “Web Address (URL)” method. (It won’t work by directly accessing it from “My Drive” and I don’t want to “Upload” because that’s only temporary.) So, when I insert the new “direct link” URL from your instructions, I get returned to my Settings and it shows up as a “broken image” square. In other words, the link doesn’t work. I checked and double-checked that the image is publically accessible, and it IS. What am I doing wrong. I have racked my brain trying to figure this out. Why can’t I select the “My Drive” option to specify the image like I did when I FIRST set up this e-mail signature? Is that no longer working? If it’s not, then why does Google show that as an option?? PLEASE HELP!

Hi Paul,
If you double-checked that your image URL has the right format and that its sharing properties are set to “anyone on the Internet can find and view”, then it might be a bug reported in this Google Support thread. Try opening the new Incognito window, sign in there and set up your signature image.
If this doesn’t help, I’ll need the link you are using to get to the bottom of the issue.

On gmail i used google drive and the image broke

Hi,
How did it break? Did it suddenly stop working? I’d double-check if no image’s settings were changed and if you converted the link to the right direct URL format.

The graphic shareable link is not working, how do I convert it?

Hi Claire,
By following the step 5 under How to get a direct image link in Google Drive 😉
The direct url of your image looks like this: https://drive.google.com/uc?export=view&id=1GgkaHwY3PJhjwTJFDW60BcLUbeqcWJD_

I am struggling with converting it to a direct link, please kindly help!

I’ve done everything you mention on the article, including setting the image as publicly accessible.
I replaced the id part with the image’s id and I end up with this url: https://drive.google.com/uc?export=view&id=1IU1XYyiKRwYAS-bS7CuiE3pfPZx4yDTJ

When I add it on the email signature, the image doesn’t load. I’ve also tried the url on a Chrome browser and I get an error message from Google, saying:
“We’re sorry… but your computer or network may be sending automated queries. To protect our users, we can’t process your request right now.”

There’s another weird thing happening… Here are the steps that I follow:
1) I right click on the image on Google Drive
2) The pop up window opens – I set the image as publicly accessible and click Save
3) Now the link that is generated, (this is the weird part), is not an “id=…” link. It’s the following:
https://drive.google.com/file/d/1IU1XYyiKRwYAS-bS7CuiE3pfPZx4yDTJ/view?usp=sharing
4) Since it’s not an id link, I click Done. And I then right click the image on Google drive and select “Get a Shareable Link” and that’s when I get the id link which is: https://drive.google.com/open?id=1IU1XYyiKRwYAS-bS7CuiE3pfPZx4yDTJ
5) I then replace the id and end up with this link: https://drive.google.com/uc?export=view&id=1IU1XYyiKRwYAS-bS7CuiE3pfPZx4yDTJ
6) I paste that to the email signature generator and it still doesn’t work!!

A few notes:
– The image is 150x150px.
– The image is a png (also tried with a jpg – doesn’t work)
– The folder on Google Drive that contains the image is also set as publicly shared (I’ve also tried with an image outside a folder – same thing, doesn’t work!)

Can’t see what could be going wrong…

Any help would be much appreciated!

Hi Lisa,
The URL you are using is a perfectly fine direct URL and it should work without any problems. I’ve just tested it and it works both when I visit the URL and paste it into the generator. The issue lies elsewhere. It seems that Google suspects you are using some kind of automation. There are multiple possible reasons for that and some threads provide answers that can help you. Here is an example with some further links: https://www.linode.com/community/questions/418/i-just-got-the-message-your-computer-or-network-may-be-sending-automated-queries

Any clues on how to get this signature to work on iphones/ipads? I found a page that walked me through copying and pasting into the signature field in settings, and it copies just fine. But when I go to send a message my photo and social media icons don’t come through.

If you can see the graphics after pasting the signature, most probably the signature works fine on your end and the images are blocked by your recipient’s email client. When the recipient adds you to a safe senders list, or clicks the option to download pictures, your images will appear.
It could also relate to the problem with iPhone deleting images from replies and forwards, described in this article.

Very useful for Gmail. Thank you.

How can I make sure the direct link I created via dropbox doesn’t expire when I Insert it into gmail’s inline image icon on the signature section? Ive tried this a few times with another image url link generator from online and the image link broke after a few days, but hoping the link I created with dropbox will stay as is. thanks!

If you follow the steps from this article for Dropbox, the link should not expire – the one I have used has been valid since I’ve written the post (around 9 months now). Just make sure you do not delete or change settings of the image from your Dropbox.

Perfect! I love your explanation

This one instead.

And for this one: https://drive.google.com/uc?export=view&id=1Ej5YKf_BfoG319I4BQzcg9BVPUa6-FY3
Aren’t those a bit blurry?

Hi I also am struggling to turn it from shareable to direct, please help!

How do you get a direct image URL in OneDrive?

step 2 says to “Once the image is uploaded to your OneDrive, right-click it, and choose Embed from the menu. In the menu which appears on the right side, click Generate.”

the above link does not show image.

Hi Anon,
the problem is that you are most probably using OneDrive for Business and not OneDrive. Using the company’s OneDrive for Business will not work for embedding images.

Thanks for replying. ok so this direct link does not work for onedrive for business. Does this direct link method work for the G suite version of Google Drive? G suite version of Google Photos? which would you recommend Google Drive vs Photos for image hosting to directly link to other apps?

G Suite version of Google Drive should work without any issues. You can follow the exact steps listed in this article to get the direct link.

Thank you for this info. I tried my best to figure it out, copy what you have done for everyone else, however my banner just comes up with a link named “banner” vs. the actual picture. What could i be doing wrong? Here’s my copy – https://drive.google.com/open?id=1sfRQ-NbJY4iLkku48WOkm_-lAle5J_Op

Thanks again for all your help.

Hi Brandon,
I’m pretty sure you haven’t set the visibility of the image to “Anyone on the Internet can find and view it”. Clicking the sharing settings and switching to this option would be the first step to make it work. Now that I look at the article, I don’t think I have mentioned it in the instructions, thanks for noticing!

Thanks so much.. I’ll certainly give that a try. Much appreciated. 🙂

THANK YOU. VERY HELPFUL

Ended up using the generator with templates, this looks great, thank you so very much!

Good day
i need to make fixed shared link to be enable to change the photo in it and the link is notchanged
to be able to distribute this signature contain this photo link on many PCs and when change the photo in the sorce changed on this many PCs

Hello Ahmed,
As far as I know, it’s impossible with image hosting services. With your own website – it depends heavily on what tools you use, but should be as easy as uploading an image via FTP and then replacing it with another image, using the exact same path and file names.
By the way, if by “shared link” you mean “shareable link” – it will not work in email signatures. Only direct links will do (as stated in the article).

Hi
My shareble link is

Please, please help

Hi Kelly,
here you go: https://drive.google.com/uc?export=view&id=1Yw6xnhnJKPRSnVgQtS_Xc-q_lLNrvdxn

HI My Sharable link is

Hi,
https://drive.google.com/uc?export=view&id=1p2FD93qIZOXtoUPk8itZLA__jRf-lB2z is its direct form.

Hi. My shareable google drive link is https://drive.google.com/open?id=10ZhWCdksNr9uVKn0KkN65r9t7XciR0Fh and I can’t figure out how to make turn that into a direct link. Any help is appreciated!

Hi Trish,
the direct link is: https://drive.google.com/uc?export=view&id=10ZhWCdksNr9uVKn0KkN65r9t7XciR0Fh
You simply needed to leave the id part unchanged and replace the first part of the URL.

Hello! My shareable Google Drive link looks like this: https://drive.google.com/file/d/1dixPakx-Le1EwkpdPrsUYMXk99CedHoa/view?usp=sharing. How do I turn that into a direct link?

I also tried using OneDrive, but “embed” was not an option when I right-clicked.

Thanks for your help!

How do I make this into a direct link?

This is how your direct link looks like:
https://drive.google.com/uc?export=view&id=15KMras_g61IueGg8VJu2eYGYIP3mHeG9

As far as I can tell the direct link option has been removed from imgur. I could be missing something however. If you get the chance you may want to confirm this finding.

I have just checked, and I can still see the direct link field. Make sure you are in the Image section of settings (To access it, you can click your profile name in the top-right corner and go to Image. If you are looking at a post, and not an image, right-click the graphic and choose Copy image address from the context menu to get the direct link.

Thank you Kamil. This is so helpful.

Banner didn’t work

Hello Jacqueline,
I would love to help you, but I would need more information to be able to do so. Which hosting service have you used? What is the direct link you have generated? Have you set the image to be visible for everyone?

Leave a Reply Cancel reply

Written by Kamil

Published on Feb 25, 2019
Comments | Leave a reply

How to Get the URL of Images You Upload in WordPress

Last updated on July 29th, 2019 by Editorial Staff | Reader Disclosure Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Do you want to find the link or URL of images you upload in WordPress?

Sometimes you may need to get the link of an image to display it in other areas of your website or social media platforms.

In this article, we will show you how to easily get the URL of images that you upload to your WordPress site.

Video Tutorial

If you’d prefer written instructions, just keep reading.

Finding a WordPress Image URL – Step by Step

WordPress automatically creates a unique URL for each image you upload to your website using the default WordPress media uploader.

Usually, a WordPress image URL includes your domain name followed by /wp-content/uploads/, date of image upload, and the image file name.

For example, an image named ‘travelaccessories.png’ uploaded to example.com in January 2019 will have a URL like this:

Now let’s take a look at how to get the URL of images uploaded to your WordPress site.

First, you need to login to your WordPress admin area and click on the Media menu. Once done, it will open your media library where all your images and other media files are stored.

Next, you can use the search feature to find the image that you want to find the link of.

Once you click on the image, it will open a popup window with the image attachment details. You will see the image details in the right column and image preview on the left.

The right column displays all image details including file name, file type, upload date, file size, dimensions, and image metadata like image alt text, title, caption, description, image uploaded by, etc.

You will also see the image URL at the end. It is the link next to ‘Copy Link’ option.

You can simply copy the link and use it anywhere you like.

If you open the image URL in your browser, then you can see the full size original version of the image uploaded.

Finding Your WordPress Image URLs from the Frontend

The method shown above lets you get the URL of any image uploaded in WordPress, whether it is published live or not.

If you want to get the URL of images already published on your site, then you can get it from the frontend itself. It is much easier!

Open a page or post where the image is published and locate the image. After that, right-click on the image, and select ‘Open image in new tab’ option.

Once the image opens in the new tab, look at the URL in the address bar. That is your WordPress image URL.

Now you can copy the image address and use it anywhere you want.

It is pretty quick and straightforward!

How to Get the URL of GIFs, Videos, and PDFs in WordPress

As mentioned above, other media files like GIFs, videos, and documents like PDFs are also saved in the WordPress media library. You can easily find the URL of these files by following the same steps as shown above.

Go to Media » Library from your dashboard, and then click on a GIF, video, or document whose URL you want to see. After that, attachment details popup window will appear.

You can get the attachment URL next to the ‘Copy Link’ option on the right column.

We hope this article helped you to learn how to get the URL of images you upload in WordPress. You may also want to see our guide on basic image editing in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Howbloggerz

Blogger Tips, Tricks, Templates and Tutorials

Need Help in finding, getting or locating the URL, web address, link of the image, photo or picture in blogger. Then follow the step by step instructions with images to find the URL of the uploaded image via blog post.

How To Get The URL Of An Image In Blogger

As each day there are lots of new users joining the world of blogging, It is very important to know about the basic tricks in blogger and finding the URL, address or link of the image you upload on your blog post is one of them. If you want to know how to find the URL of an image, photo or picture follow the given instructions :

Steps : Finding The URL Of An Image

Step 1. Log in to your Blogger account, then click on New Post.

Step 2. Click on HTML ( Right to compose ) and clear the codes from input area.

Step 3. Click on Image upload icon, in pop-up window select the image you want to upload and click add selected.

Step 4. Again a pop-up box appear, Select None under ‘Image alignment’ and Original size under ‘Image size’, then click ‘OK’.

Step 5. Now some codes will appear in your input field area like this :

This code contains two same URLs of an image ( copy any one ) :

All the images uploaded on blogger are saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image). Therefore another way to get the URL of the already published images from your blog or directly from PicasaWeb is by using browser option :

To get the URL of the image from Picasa, click on the image to open in full size > right click on the picture and select the following option depending on the browser you are using.

— On Google Chrome > select Copy Image Address.

— If you are using Mozilla Firefox > select Copy Image Location.

— If you are using Opera > select Copy Image URL.

— If you are using Safari > select Copy Image Address.

— If you are using Internet Explorer > first select Properties, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it.