1

I'm getting an image url from my database and need to display it in an <img> tag. The problem I have is that JSF is encoding &'s as &amp; and the image url is not found.

Here's an example. The correct image url: 

https://<server details>?ahid=2096&aid=107687&lid=28812968&url=202.jpg

The encoded url: 

https://<server details>?ahid=2096&amp;aid=107687&amp;lid=28812968&amp;url=202.jpg

In this case the encoded image url is not found and displays the broken image icon. How do I solve this?

EDIT: the html elements with their JSF tags:

<a href='#{product.itemUrl}' target="_blank"> 
    <img src='#{searchResults.getThumbnailUrl(product)}' class="img-responsive imageproduct" />
</a>

EDIT 2:

I thought I'd try replacing the &amp; back to & with javascript but this doesn't work either because in the javascript the image url is fine, while in the browser's view source it's not. Here's the code. In the browser: 

<img id="thumbnailId" onmouseover="decodeUrl(this)" src="https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;aid=108183&amp;lid=28955872&amp;url=144-1.jpg" />

The javascript: 

function decodeUrl(img) {
    var url = img.src;
    console.log("url before = " + url);
    url = replaceAll(url, "&amp;", "&");
    console.log("url after = " + url);
}

function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

The output is 

url before = https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&aid=108183&lid=28955872&url=144-1.jpg
url after =  https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&aid=108183&lid=28955872&url=144-1.jpg

as you can see the two are identical, and correct. But doing a view source results in

src="https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;aid=108183&amp;lid=28955872&amp;url=144-1.jpg"

which is incorrect, and the image is broken. Any idea how to fix this?

Eddy
  • 3,533
  • 13
  • 59
  • 89
  • 1
    What server-side technology are you using (php, .NET, etc...)? – Richard Ev Mar 01 '16 at 12:03
  • In the html-code the `&` has to be encoded as `&`, so if you look at the html code your image url has to look like this `` the browser will automatically convert that url to `https://?ahid=2096&aid=107687&lid=28812968&url=202.jpg` when requesting the image. I would guess you have some double encoding and that your source actually contains `&amp;` : `` – t.niese Mar 01 '16 at 12:05
  • [link1](http://mrcoles.com/blog/how-use-amersands-html-encode/) , [link2](http://stackoverflow.com/questions/2949173/how-can-i-stop-the-browser-from-url-encoding-form-values-on-get) – G.L.P Mar 01 '16 at 12:08
  • @RichardEverett it's JSF2 and tomcat. – Eddy Mar 01 '16 at 12:37
  • This is indeed not correct. How exactly are you creating the `` elements? – BalusC Mar 01 '16 at 12:55
  • @BalusC I edited the question with the elements. – Eddy Mar 01 '16 at 13:18
  • How does the generated HTML output look like? Does it contain `&` or `&amp;`? Do you have evidence that your browser is not properly interpreting `&` as `&`? (press F12, open *Network* and check the image request). – BalusC Mar 01 '16 at 14:01
  • Here it is: – Eddy Mar 01 '16 at 14:23
  • @BalusC I edited the question with some more details (Edit 2). Any idea how to fix this? – Eddy Mar 06 '16 at 08:35
  • Please check the image request in browser's HTTP traffic monitor. Press F12, etc. – BalusC Mar 06 '16 at 12:41
  • Here's an example entry: LotImageViewer.asp?ahid=4292&aid=108223&lid=29012930&url=127.jpg www.proxibid.com/asp GET 200 OK text/html searchresults:696 Parser 5.1 KB 34.7 KB 277 ms 228 m – Eddy Mar 06 '16 at 13:03
  • That sounds good, so what is effectively the problem? It at least does NOT return an image, at least not wit the correct mime-type (text/html instead of image/jpeg). Maybe (if you e.g. use a servlet to request those things, set the correct mime-type) – Kukeltje Mar 06 '16 at 16:39
  • @Kukeltje I tried setting the imageurl in the JSF been which is just like doing it in the servlet. In the bean the image src looks right. But somewhere along the way it gets encoded and breaks. – Eddy Mar 06 '16 at 19:41
  • a 200 response means OK... and in that URL I don't see any encoding... 5.1 KB is transferred... That your browser shows the & as & is because it is XHTML, so an & needs to be encoded... Situation normal (besides the wrong mimetype, but that seems to be an ASP issue) – Kukeltje Mar 06 '16 at 19:55
  • Uhhhhmmm Did you try to post https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&aid=108183&lid=28955872& url=144-1.jpg in your browser?There is NO image transferred but an html page!!!!! So that is why it fails. Sorry, but you need to learn some basics about web technology first – Kukeltje Mar 06 '16 at 19:58

1 Answers1

2

What you see in your browser is correct. In html an & should be encoded as &amp; This is technically interpreted as an & when your browser is requesting the image as you can see what you post in the comment as an http 200 response. What is wrong here is that you expect https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&amp;aid=108183&amp;lid=28955872&amp;url=144-1.jpg to return an image when it returns an html page 

LotImageViewer.asp?ahid=4292&aid=108223&lid=29012930&url=127.jpg
www.proxibid.com/asp
GET 200 OK
text/html
searchresults:696 Parser 5.1 KB 34.7 KB 277 ms 228 m

If you post this url in your browser (or just click here) you can see what it returns. So basically, the error is your 'expectation'. If you click the 'full screen' in the image, you'll see

https://www.proxibid.com/AuctionImages/3231/108183/FullSize/144-1.jpg

Which shows the image full screen. So You need to adapt your code

Kukeltje
  • 12,223
  • 4
  • 24
  • 47
  • If you post https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&aid=108183&lid=28955872&url=144-1.jpg in your browser it returns an error. But when you manually replace the & with just & it gives you the image. But that's exactly the url I'm submitting: https://www.proxibid.com/asp/LotImageViewer.asp?ahid=3231&aid=108183&lid=28955872&url=144-1.jpg. And it doesn't come back, while displaying the link with the & in the browser. So your answer is not really helpful. – Eddy Mar 06 '16 at 21:33
  • Sigh...Your COMMENT posted an 200, so your browser UNESCAPED the `&amp` to `&` and it worked... Try creating a smal plain jsf page and put a `` in there... Errors? Most likely yes when even trying to LOAD the page... try putting an `` in there... Errors? Most likely some 404 in the browser dev tool network tab for trying to load `&bla.jpg" See the browser UNESCAPING the & ???. Your PROBLEM is that the url does NOT return what you expect... – Kukeltje Mar 06 '16 at 21:39
  • See http://stackoverflow.com/questions/6883860/how-to-insert-special-characters-like-and-into-jsf-components-value-attribu and http://stackoverflow.com/questions/3705591/do-i-encode-ampersands-in-a-href PLEASE learn the basics and check, debug etc... – Kukeltje Mar 06 '16 at 21:41
  • I know this already. But you are correct that the url is returning something else and I need to convert what I have to the syntax that works. So it doesn't have anything to do with encoding or JSF, just something that the asp is doing under the hood. – Eddy Mar 06 '16 at 21:59
  • No, it is not even ASP related... JSF, Servlets, PHP, Python, Ruby, whatever could do the same... It is a valid page that is returned, nothing 'under the hood'. And why if you know this already, I only triggered this 'knowledge' after kind of 'not being nice' in my previous comment? In your comment before that you kind of said I was 'stupid'. Never the less, good you found the cause. Next time be a little more investigative. – Kukeltje Mar 06 '16 at 22:06
  • You could say for example here's a link for "background information" or to "expand your horizons..." Anyway when I said it's ASP related I meant the server, whatever technology it is. And thanks again. – Eddy Mar 07 '16 at 05:49