skip to Main Content

There are similar questions like this, this, this, and this, but they don’t address the problem.

We have a locally stored image that is rendered in the development environment.

In production, however, the image doesn’t render. Accessing the image URL from the browser gets redirected to the 404 page because the image isn’t found for some reason. Other images in the same directory are rendered without issue.

Details :-

  • Image 1 URL: https://test.com/designs/thumbnails/foo/bar1.jpg

  • Image 2 URL: https://test.com/designs/thumbnails/foo/bar2.jpg

  • Entering both image URLs directly into the browser yields different results. Image 1 will render, but image 2 won’t. Image 2 redirects to the 404 page.

  • This isn’t a caching issue, rendering in incognito fails.

  • Both images exist in the directory.

  • This seems to occur for new images, though the pattern isn’t clear (i.e., some new images render but not all do).

  • Image rendering code: <img class="thumbnail" src="<%= design["thumbnailURL"] %>"> where design["thumbnailURL"] is an relative URL to the image (which, yes, does exist).

  • We use Rails 3.2 and Cloudflare.

  • Server stack:

    • Passenger AppPreloader Version: 6.0.2
    • Instance: ElIQgS48 (nginx/1.15.8 Phusion_Passenger/6.0.2)
    • Ruby version: ruby 2.1.2p95
    • Operating system: CentOS Linux release 7.6.1810 (Core)
    • PHP 7.0.33
    • Server version: 5.5.60-MariaDB MariaDB Server
    • Postfix mail_version = 2.10.1
    • Dovecot version: 2.2.36 (1f10bfa63)

3

Answers


  1. Do you use assets pipeline?
    if yes, do precompile first by

    RAILS_ENV=production rails assets:precompile
    

    then try

    # attempt 1
    <img class="thumbnail" src="<%= 'assets/' + design["thumbnailURL"] %>">
    # because the images would be compiled and under public/assets/
    # I don't know exactly what's design["thumbnailURL"] contain, so I list this attempt
    
    # attempt 2
    <%= image_tag design["thumbnailURL"], alt: '...', class: 'thumbnail' %>
    # image_tag will also append SHA256 suffix in the filename
    # in production environment, all the assets will be appended a SHA256 to let the browser know its the latest assets, ex: aaa.jpg will be aaa-908e25f4bf641868d8683022a5b62f54.jpg, it may be the cause the browser cannot find the right one and return 404
    
    # attempt 3
    # if you don't want the images being precomiled, just put original images under public/ rather than app/assets/images/
    # design["thumbnailURL"] should be the relative path to public/
    # and you can remain your <img ...> same in view
    # however, if you update the image, the users who already have been to your site would cache the old image and your new image will not be shown on their browser
    
    

    deploy the new code and see if it works

    Login or Signup to reply.
  2. If you host your files in public folder and don’t use assets pipeline, it is often the job of the HTTP webserver (apache, nginx …) to serve static files directly. They do that well and fast.

    Please give more details about your production hosting setup (webserver, config etc), as well as the urls generated by Rails for your pictures. I’ll update the answer accordingly, with relevant webserver config so that your static files get served directly.

    Login or Signup to reply.
  3. I just looked at you example https://www.test.com/designs/thumbnails/foo/bar1.jpg and then I inspected yout image tag and I saw <img src="img/test.com-logo.png" alt="Test.com create tests"> I was able to update it to <img src="/img/test.com-logo.png" alt="Test.com create tests"> and I was able to see your logo.

    you can update your erb from <img class="thumbnail" src="<%= design["thumbnailURL"] %>"> to <img class="thumbnail" src="/<%= design["thumbnailURL"] %>"> or you can make sure to inclue the “/” in the value for the design["thumbnailURL"] I hope that this is of help

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search