2

Apologies if the question isn't correctly worded, but here it goes: I currently have a website which needs to display a certain image, however, the link provided to me is a link that redirects to the image.

So think www.linktoimage.com/foo, which redirects me to my actual image's url, so for example, https://i.imgur.com/76lLZAn.png.

Unfortunately this is a requirement to the project I am working on for several reasons and I can't really think of a way to get around this.

For the record, I am using meteor with the blaze template engine, in case that helps. A way I thought of getting this done may be through using a helper, which will follow the redirect for me, and somehow grab the ultimate url. So something like this:

Template.myTemplate.helpers({
   getMyImage: function (proxyUrl) {
     var actualAddress

     // somehow get the images actual address...

     return actualAddress
   }
})

Then in my html file:

<template name="myTemplate">
    <div>
       <img src="{{getMyImage 'proxyUrl'}}"
    <div>
</template>

Of course if there is a better way to do this just through the HTML that would be fantastic too. Unfortunately right now, I am clueless on how I would get the actual URL.

Thanks!

Edit: essentially I want to do this, but using JavaScript instead of PHP.

Edit2: possibly found a way to get around this, though it is not quite working and has some problems due to it being async. Basically it would be using meteor's HTTP library:

Template.myTemplate.helpers({
 getMyImage: function () {
    var proxyUrl = 'http://www.tablotv.com/client-paywall-snapshots/web'
    return HTTP.call('GET', proxyUrl, function (err, result){
      console.warn('hereeee', result, err)
    })
  }
})

However I am getting the following error:

network at XMLHttpRequest.xhr.onreadystatechange

I can imagine this has something to do with it being async, perhaps? Anyway, am I on the right path now? How could I get this working?

pneumatics
  • 2,836
  • 1
  • 27
  • 27
theJuls
  • 6,788
  • 14
  • 73
  • 160
  • You don't want to redirect, do you own the proxy? You should probably be forwarding the headers from the actual image to the client, such as the content-type, etc... – kyle Sep 20 '17 at 14:50
  • Sorry if I sound ignorant, but how do I do that? – theJuls Sep 20 '17 at 15:03
  • It isn't ignorant, what you're wanting to do isn't the easiest. In meteor do you fetch the image from a different host and then serve the image from meteor to the client? Specifically how is your proxy working? – kyle Sep 20 '17 at 15:08
  • As it is now I don't have anything related to this proxy link to the image working, I'm afraid. Previously I would just use the img tag with a link (image address) as the src (like what 99% of the cases), however it has been requested that I use the links which redirect me to the actual image, so I had to change things. I am not sure even where to start doing this. The code I included in the OP is the direction I think I have to go to get this done. – theJuls Sep 20 '17 at 15:18
  • It's not really a proxy right otherwise the url would just work as is. Are you actually getting a 301 redirect from the original link? – Michel Floyd Sep 20 '17 at 19:30
  • @MichelFloyd sorry if the naming I am using is wrong, but that is correct, I get a 301 redirect from www.linktoimage.com to the actual link of the image. – theJuls Sep 20 '17 at 20:00
  • Why isn't the browser just following the link and displaying the image then? You shouldn't need to do this yourself. See for example https://stackoverflow.com/a/3778511/2805154 – Michel Floyd Sep 20 '17 at 21:12
  • Ok, I screwed up. Basically I did something unrelated that screwed up the image, and thought it had to do with the redirect. Thanks for pointing that out, problem solved! Thanks for your time – theJuls Sep 20 '17 at 22:52

0 Answers0