activestorage image_tag shows missing image in webkit

Question

Thought I would start here before going to the rails team. After uploading an attachment and redirecting back to the page to see it, or navigating to the page normally to see it, it briefly displays then disappears showing a missing image icon. If I refresh the page it appears normally. This happens in Chrome and Safari but seems like Firefox is unaffected.

image_tag @record.document.representation(resize_to_limit: [430, 430])

I've also tried .processed and url_for() but they make no difference. It also makes no difference if it's local or cloud storage.

In the log if it's successful I see this for the "rails/activestorage/disk" request...

Completed 302 Found

otherwise I see this

Completed 304 Not Modified

The blob signatures are the same in both cases. I've also tried it by turning off Turbo with no success.

Has anyone encountered this and has any solutions? Thanks!

Answer 1

Just use mini_magick as in rails 6 also works in rails 7.0.4, just include this line in config/application.rb

config.active_storage.variant_processor = :mini_magick

Also you can check more details if using on heroku or....

Answer 2

config.active_storage.variant_processor = :mini_magick 

add this to your development.rb and make sure you have installed mini_magick in your computer