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?

Improve this question
15
  • 1
    What server-side technology are you using (php, .NET, etc...)? Commented Mar 1, 2016 at 12:03
  • In the html-code the & has to be encoded as &amp;, so if you look at the html code your image url has to look like this <img src="https://<server details>?ahid=2096&amp;aid=107687&amp;lid=28812968&amp;url=202.jpg" > the browser will automatically convert that url to https://<server details>?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;amp; : <img src="https://<server details>?ahid=2096&amp;amp;aid=107687&amp;amp;lid=28812968&amp;amp;url=202.jpg" > Commented Mar 1, 2016 at 12:05
  • link1 , link2 Commented Mar 1, 2016 at 12:08
  • @RichardEverett it's JSF2 and tomcat. Commented Mar 1, 2016 at 12:37
  • This is indeed not correct. How exactly are you creating the <img> elements? Commented Mar 1, 2016 at 12:55

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

If you post proxibid.com/asp/… in your browser it returns an error. But when you manually replace the &amp; with just & it gives you the image. But that's exactly the url I'm submitting: proxibid.com/asp/…. And it doesn't come back, while displaying the link with the &amp; in the browser. So your answer is not really helpful.
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 <img src="&bla.jpg"/> in there... Errors? Most likely yes when even trying to LOAD the page... try putting an <img src="&amp;bla.jpg"/> 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 &amp; ???. Your PROBLEM is that the url does NOT return what you expect...
See stackoverflow.com/questions/6883860/… and stackoverflow.com/questions/3705591/… PLEASE learn the basics and check, debug etc...
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.
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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.