Cloudinary图像没有显示在现场

Question

Rails非常新，但我在获取实时站点上显示的图像时遇到了问题。这些图片由用户上传，作为创建帖子的一部分，但我遇到了两个问题：

1. 媒体库在将图像上载到本地主机
2. 时没有更新，上传工作正常并显示，但是在活动站点上没有显示图像。页面加载良好，但是生成的Cloudinary图像src没有指向任何地方：

​

    <img class="main-post-image" src="https://res.cloudinary.com/hw2ugvhic/image/upload/vfvhamrbx0jz8rj6y17c2vy4m2gp">

​

新员额视图：

​

<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>

​

员额主任：

​

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

​

职位模式：

​

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

​

区域显示视图页面(可以查看文章的位置)

​

<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 %>

​

区域控制器

​

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

​

已采取的步骤

向Heroku添加Cloudinary创建了一个dotenv文件，其中添加了cloudinary键，并更新了以下内容：

storage.yml

​

cloudinary:
  service: Cloudinary
  folder: <%= Rails.env %>

​

development.rb

​

  config.active_storage.service = :cloudinary

​

接下来我能试试什么？

Answer 1

我认为唯一可能缺少的是，活动存储没有将文件夹存储为密钥的一部分，例如，post.main_image.key将是一个随机字符串，但缺少您在storage.yml文件中定义的folderName/<random-string>。

我相信您只需要在cl_image_tag(post.main_image.key, class:"main-post-image")中包含文件夹名就应该是cl_image_tag("folderName/"+post.main_image.key, class:"main-post-image")

可能有一种动态传递的方法。