question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there any way to get the URL that is created by using Image component?

See original GitHub issue

I’ve been using the Image component with multiple Transformations inside to get the result I’m wanting. Is there a way the grab the URL that the Image component generates when it creates the <img src="...."/> element? What I’m wanting to do is get the URL as a string to add to the head meta tags of the page as the image to use for SEO and social media preview cards. I’m using Next.js for ssr, so I would be doing this server side. From what I can see, the URL lives in the Image components state, but it is not exposed through the library to use.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
shirlymanorcommented, Nov 22, 2019

@zachrdz you can use an array that the result (array.tostring() ) will look like width:200,opacity:30 Or use rae transformation. For example: cloudinary.url(“sample”,{raw_transformation:“w_200,h_300,q_auto”})

1reaction
shirlymanorcommented, Nov 22, 2019

@zachrdz, unfortunately, you can’t use react to get the full URL. You can use nodeJS for example: cloudinary.url("sample",{width:300});

Read more comments on GitHub >

github_iconTop Results From Across the Web

3 Methods On How To Get An Image URL - Mailvio blog
Let's take an in-depth look at some of the easiest ways how to get an image URL. The significance of images is obvious...
Read more >
How to get URL of an image in JavaScript? - Stack Overflow
Instead of imageElement.getAttribute("src") or $("img.something").attr("src") , which reads the original markup, use imageElement.src ...
Read more >
How to Find the Codes or URLs for Web Images - ThoughtCo
Find the image you want. · Right-click that image (Ctrl+click on a Mac). Chrome right click on image · A menu will appear....
Read more >
Verify if a url links to an image (without relying on regex)
Turns out there is a way to find out if a url links to an image file without incurring the cost of downloading....
Read more >
How to Make a Picture Into a Link - HubSpot Blog
Step 1: Select your image. · Step 2: Optimize size and scale. · Step 3: Upload your image and get the URL. ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found