Skip to main content

Image Not Loading

MARK VAN DALM

Image is stored on a web server. Optimization profile is created as type "Web Address." Info entered into URI Base follows format indicated in "Quick Starts, Deliver from a web address." Media Optimizer URL format matches that indicated in "Overview, Media Optimizer delivery URLs," and matches that indicated in "Configuration, Example 1," and in "Configuration, Types of media sources, Web address." File path is updated to include the Media Optimizer URL prefix as per the aformentioned documentation. In looking through the Response and Request headers found within my browser's Web Developer Tools/Network I don't see any "X-Cld-Error" header, and I don't see any reference to Cloudinary's server. I believe I've reviewed all available how-to documentation and yet I still can't get this process to work. Please advise. Thank you.

0

Comments

7 comments

Date Votes
  • Stephen Doyle

    Hi Mark,

    May I ask for a specific example delivery URL that you're trying to access so we can check where it's failing?

    If you prefer not to share anything specific to your account in this public forum, you can also contact us directly via the "Submit a request" link on the top of our support site

    Regards,

    Stephen

    0
  • MARK VAN DALM

    My domain is http://www.bootprints.net

    The specific page on which the image is being displayed is http://www.bootprints.net/patterns.html. Please no judging of my lack of web design skills :-P

    That page shows a spreadsheet layout. The specific cell/image I've been testing with is cell # T-13 (the very bottom right cell). You will see other cells not loading, but that's because there is not yet any image created for them. Once I am able to get cell T-13 to load I plan to update all other img src values.

    The original img src attribute value is "images/pattern graphics/image 12 miscellaneous t13.jpg"

    In creating my Cloudinary Optimization Profile I chose the cloud name "bootprints" and the path prefix name "server"

    After activating my Optimization Profile I used the copy/paste function to amend the img src value to "https://bootprints.mo.cloudinary.net/server/images/pattern graphics/image 12 miscellaneous t13.jpg"

    Please let me know if you need any other information. ty.

    0
  • Aleksandar Kostadinov

    Hi Mark,

    Thanks for sharing those details.

    I checked our logs and for that remote image (http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg) when we tried to grab it we received a response with text/html Content-Type which is not accepted as we expected an image-based Content-Type.

    This can be reproduced by running a cURL request like so:

    curl -sD - -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36" http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg

    HTTP/1.1 200 OK
    Server: nginx
    Date: Sat, 25 Jun 2022 09:20:40 GMT
    Content-Type: text/html
    Content-Length: 891
    Connection: keep-alive
    Vary: Accept-Encoding
    Expires: Thu, 01 Jan 1970 00:00:01 GMT
    Cache-Control: no-cache

    <html><body><script type="text/javascript" src="/aes.js" ></script><script>function toNumbers(d){var e=[];d.replace(/(..)/g,function(d){e.push(parseInt(d,16))});return e}function toHex(){for(var d=[],d=1==arguments.length&&arguments[0].constructor==Array?arguments[0]:arguments,e="",f=0;f<d.length;f++)e+=(16>d[f]?"0":"")+d[f].toString(16);return e.toLowerCase()}var a=toNumbers("f655ba9d09a112d4968c63579db590b4"),b=toNumbers("98344c2eee86c3994890592585b49f80"),c=toNumbers("9f6e7ff1b494467d424fa4f7260deea4");document.cookie="__test="+toHex(slowAES.decrypt(c,2,a,b))+"; expires=Thu, 31-Dec-37 23:55:55 GMT; path=/"; location.href="http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg?i=1";</script><noscript>This site requires Javascript to work, please enable Javascript in your browser or use a browser with Javascript support</noscript></body></html>

    May I please ask you to check that and ensure the request to origin returns the image/video only and not an HTML page which then displays the requested assets, otherwise, Media Optimizer will not be able to pull your resources.

    Looking forward to your response

    0
  • MARK VAN DALM

    Mine is an image tag wrapped in an anchor tag: <a href="#"><img src="image/pattern graphics/graphic.jpg" /></a>

    Or, more specifically: 

    <a href="image 12 miscellaneous t13.html"><img src="https://bootprints.mo.cloudinary.net/server/images/pattern graphics/image 12 miscellaneous t13.jpg" title="Image 12 Miscellaneous" alt="Image 12 Miscellaneous" id="t13"/></a>

    So, while the anchor tag calls a different html file when clicked on, the img tag does not. The image tag just calls the image by way of its src attribute value.

    Also, if I strip the cloudinary bits off of the image file path in the src value the image displays correctly.

    The only other thing you might be suggesting is that my image is not a photograph which is correct. The image is a graphic and not an actual photo, but it is still a jpg file. Does that matter?

    Another observation is that my jpg file has spaces in the file name. Could that be the cause of the problem?

    0
  • Aleksandar Kostadinov
    Edited

    Hi Mark,

    Thanks for your response.

    I think there may be some confusion here so I'd to clarify that - the HTML response I mentioned is what the Cloudinary server receives when we request the JPG URL which is from the <img/> 'src' - and the actual DOM/HTML content on the requesting page (http://www.bootprints.net/patterns.html) won't be impacting this.

    Specifically, when I access http://www.bootprints.net/patterns.html I can see 1 URL using Cloudinary Media Optimizer, which is https://bootprints.mo.cloudinary.net/server/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg - and the logs for that URL shows us that the remote server we contact to grab the image from (i.e. http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg) is returning a Content-Type of text/html and not the expected image/jpeg in this case.

    When we contact the remote server based on your Media Source we expect the response to that request to return an image but since we're receiving an HTML response we cannot process that and return a 400 Bad Request back.

    In short, the remote source URL http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg needs to return an image Content-Type and not HTML.

    The request Cloudinary makes is with User-Agent: Mozilla/5.0 (compatible; Cloudinary/1.0) - so you should be able to see those requests in your server's logs.

    The response we received from http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg is:

    "Server"=>"nginx"
    "Date"=>"Mon
    27 Jun 2022 10:07:35 GMT"
    "Content-Type"=>"text/html"
    "Vary"=>"Accept-Encoding"
    "Expires"=>"Thu
    01 Jan 1970 00:00:01 GMT"
    "Cache-Control"=>"no-cache"
    "Content-Encoding"=>"gzip"
    "X-Cache"=>"MISS from ip-10-0-15-223"
    "X-Cache-Lookup"=>"MISS from ip-10-0-15-223:3128"
    "Transfer-Encoding"=>"chunked"
    "Connection"=>"keep-alive"

    Are you able to please check why that may be happening and instead return an image Content-Type?

    Of course, any questions please let me know.

    PS: It looks like the first request to http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg returns text/html Content-Type which then requests the same URL as above but with `?i=1` query string which sets a cookie "__test" and only with this cookie will subsequent requests for that URL return image Content-Type.

    0
  • MARK VAN DALM

    Okay. I created and uploaded a .htaccess file to set mime type to image/jpg instead of text/html. I don't understand how to run cURL request, but when I checked the Web Developer Tool in Firefox I see that image "image 12 miscellaneous t13.jpg" is identified as type .gif even though it was created and saved as a .jpg. And, I can see a referenced to the cloudinary server now. But the image still won't load. Please advise. Thank you.

    0
  • Aleksandar Kostadinov

    Hi Mark,

    Thanks for your response.

    The reason it works via the Browser is that either 1) you already have the `__test` cookie stored and that is sent upon the first request for the image so an image Content-Type is returned or 2) you're accessing the URL without a cookie and in that case you get another request in the background which actually sets the cookie and then the image can be delivered, but you're not seeing those additional requests unless you're looking at the browser's Network tab.

    We can see that by accessing the following URL which is from the image's 'src' in an Incognito tab (http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg).

    If you open the Network tab of the Browser Console we can see 3 requests. Screenshot:

    The first request returns text/HTML Content-Type (below is the full response):

    <html><body><script type="text/javascript" src="/aes.js" ></script><script>function toNumbers(d){var e=[];d.replace(/(..)/g,function(d){e.push(parseInt(d,16))});return e}function toHex(){for(var d=[],d=1==arguments.length&&arguments[0].constructor==Array?arguments[0]:arguments,e="",f=0;f<d.length;f++)e+=(16>d[f]?"0":"")+d[f].toString(16);return e.toLowerCase()}var a=toNumbers("f655ba9d09a112d4968c63579db590b4"),b=toNumbers("98344c2eee86c3994890592585b49f80"),c=toNumbers("eef7541d58d912d78d27bad88cb41075");document.cookie="__test="+toHex(slowAES.decrypt(c,2,a,b))+"; expires=Thu, 31-Dec-37 23:55:55 GMT; path=/"; location.href="http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg?i=1";</script><noscript>This site requires Javascript to work, please enable Javascript in your browser or use a browser with Javascript support</noscript></body></html>

    The above contains a JavaScript file (/aes.js) which adds the cookie and then requests the URL - http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg?i=1 which is the 3rd request in the above screenshot and that returns the actual image.

    The above is what the Cloudinary system receives, i.e. the HTML content upon first request and for us to be able to pull the image and deliver it via Media Optimizer we need the remote URL we request (i.e. http://www.bootprints.net/images/pattern%20graphics/image%2012%20miscellaneous%20t13.jpg based on your Media Source) to return an image Content-Type and not text/HTML as that is not compatible with Media Optimizer.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post