Cloudinary images aren't displaying on live site - ruby-on-rails

Question

Pretty new to Rails, but I'm having an issue getting images to display on a live site. The images are uploaded by the user as part of creating a post, but I'm running into two issues:
The media library is not updating when an image is uploaded
On localhost the upload works fine and is displayed, however on the live site the images are not being displayed. The page loads fine but the Cloudinary image src generated doesn't point anywhere
Example:
<img class="main-post-image" src="https://res.cloudinary.com/hw2ugvhic/image/upload/vfvhamrbx0jz8rj6y17c2vy4m2gp">
New post view:
<div class="text-center mt-3">
<h1>New post</h1>
</div>
<div class = "main-form-container">
<div class= "post-form-container">
<div data-controller="multi-upload">
<%= simple_form_for [#country, #area, #post] do |f| %>
<%= f.input :title %>
<%= f.input :summary %>
<%= f.input :description, as: :rich_text_area %>
<%= f.input :category , collection: %w(bar restaurant activity nature memory) %>
<%= f.input :main_image, as: :file, label: "square image only"%>
<%= f.file_field :images, multiple: true, data: {action: "multi-upload#addFile"} %>
<div data-multi-upload-target="files"></div>
<div class = "d-flex justify-content-center">
<%= f.button :submit, class: "green-button mt-3"%>
</div>
<div class = "text-link text-center mt-2">
<%= link_to "Go back", country_area_path(#country, #area) %>
</div>
<% end %>
</div>
</div>
</div>
Posts controller:
class PostsController < ApplicationController
def new
#country = Country.find(params[:country_id])
#area = Area.find(params[:area_id])
#post = Post.new
end
def create
#country = Country.find(params[:country_id])
#area = Area.find(params[:area_id])
#post = Post.new(post_params)
#post.user = current_user
#post.area = #area
if #post.save
redirect_to country_area_path(#country, #area)
else
render :new
end
end
def show
#country = Country.find(params[:country_id])
#area = Area.find(params[:area_id])
#post = Post.find(params[:id])
end
def edit
#post = Post.find(params[:id])
#area = Area.find(params[:area_id])
#country = Country.find(params[:country_id])
end
def update
#area = Area.find(params[:area_id])
#country = Country.find(params[:country_id])
#post = Post.find(params[:id])
#post.update(post_params)
redirect_to country_area_post_path(#country, #area, #post)
end
private
def post_params
params.require(:post).permit(:title, :summary, :description, :category, :area_id, :main_image, images: [])
end
end
Post model:
class Post < ApplicationRecord
belongs_to :user
belongs_to :area
has_one_attached :main_image, dependent: :destroy
has_many_attached :images, dependent: :destroy
has_rich_text :description
validates :title, :summary, :description, :category, :main_image, presence: true
end
Area show view page (where the posts can be viewed)
<nav aria-label="breadcrumb" class="mt-2 pl-2">
<ol class="breadcrumb">
<li class="breadcrumb-item"><%= link_to "Home", root_path %></li>
<li class="breadcrumb-item"><%= link_to #country.name, country_path(#country) %></li>
<li class="breadcrumb-item active" aria-current="page"><%= #area.name %></li>
</ol>
</nav>
<% unless #posts.empty?%>
<div class = main-posts-div>
<div>
<%= "Welcome to #{#area.name}, #{#country.name}"%>
</div>
<%= link_to "New post", new_country_area_post_path(#country, #area), class: "green-button mt-3"%>
<div>
<div class="area-main-div">
<% #posts.each do |post| %>
<%= link_to country_area_post_path(#country, #area, post) do %>
<div class= "post-card">
<div>
<% if post.main_image.nil? %>
<%= image_tag("https://picsum.photos/300/300") %>
<% else %>
<%= cl_image_tag(post.main_image.key, class:"main-post-image") %>
<% end %>
</div>
<div class = "lower-post-card">
<div>
<%= post.title %>
</div>
<div>
<em><%= post.category %></em>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<% else %>
<div class="main-posts-div-blank">
<div>
<%= "Welcome to #{#area.name}, #{#country.name}. #{#area.name} is yet to be explored, please document your experience"%><br>
</div>
<%= link_to "New post", new_country_area_post_path(#country, #area), class: "green-button mt-3"%>
</div>
<% end %>
Areas controller
class AreasController < ApplicationController
def new
#area = Area.new
end
def create
#country = Country.find(params[:country_id])
#area = Area.new(area_params)
#area.country = #country
#area.save
redirect_to country_path(#country)
end
def show
#area = Area.find(params[:id])
#country = Country.find(params[:country_id])
#post = Post.new
#posts = Post.where(area_id: #area)
end
private
def area_params
params.require(:area).permit(:name, :country_id)
end
end
Steps already taken
Added Cloudinary to Heroku
Created a dotenv file with the cloudinary key
added cloudinary gem
Updated the following:
storage.yml
cloudinary:
service: Cloudinary
folder: <%= Rails.env %>
development.rb
config.active_storage.service = :cloudinary
What can I try next?

Answer 1

I think the only thing that might be missing is that active storage does not store the folder as part of the key e.g. post.main_image.key would be a random string but is missing folderName/<random-string> which you defined in the storage.yml file.
I believe you just need to include the folder name in the cl_image_tag(post.main_image.key, class:"main-post-image") should be cl_image_tag("folderName/"+post.main_image.key, class:"main-post-image")
There probably is a way to pass that dynamically.