Rails 6: ActionText attached image not rendering in _blob partial template

Question

I'm currently working on a Rails 6 application in which I'm using cloduinary for hosting the images. I have a model with rich_text_content.

class Question < ApplicationRecord
  belongs_to :user
  has_many :comments, as: :commentable
  has_rich_text :content
end

When I add an image from the rich text editor and try to render the image the browser doesn't render the attach image.

views/questions/show.html.erb

<div class="border-t-2 border-gray-600 text-2xl m-auto w-4/5">
    <div class="h-56 my-8">
      <%= @question.content %>
    </div>
  </div>

The show.html.erb template is only displaying the text content not the attachment image in the @question.content so when there is an embeds_blob the _blob.html.erb is not displaying the image.

<figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
  <% if blob.representable? %>
      <div class="max-w-xl mx-auto rounded overflow-hidden shadow-lg">
        <%= cl_image_tag(blob.key, format: :jpg )%>
        <div class="px-6 py-4">
          <figcaption class="attachment__caption">
            <% if caption = blob.try(:caption) %>
              <%= caption %>
            <% else %>
              <div class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                <span class="attachment__name"><%= blob.filename %></span>
                <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
              </div>
            <% end %>
          </figcaption>
        </div>
      </div>
  <% end %>
</figure>

The cl_image_tag(blob.key, format: :jpg) should be rendering the attachment file but it does not as shown in the image below

However if I were to comment everything down and only have the following line. <%= cl_image_tag(blob.key, format: :jpg )%>. The image is render without the HTML structure from the _blob.html.erb.

Why is the _blob.html.erb not rendering the attach image coming from Cloudinary?

Answer 1

As you probably already know, the blob.representable? method call in the partial returns false.

If you look at the source code of representable? which in turn calls variable?, you can see the content types it checks don't include image/heic. You could configure to include it as documented here.

config.active_storage.variable_content_types accepts an array of strings indicating the content types that Active Storage can transform through ImageMagick. The default is %w(image/png image/gif image/jpg image/jpeg image/pjpeg image/tiff image/bmp image/vnd.adobe.photoshop image/vnd.microsoft.icon image/webp)

Once you include image/heic and restart the application, the image should show up.

Note: The above links point to the master branch of rails. You might want to select the right tag depending on the rails version you're using.

Hope this helps.