实时站点上未显示云图像



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

  1. 上传图像时媒体库不更新
  2. 在localhost上,上传工作正常并显示,但在实时网站上,图像没有显示。页面加载良好,但生成的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

已经采取的步骤

将Cloudinary添加到Heroku使用cloudinary键创建了一个dotenv文件添加云宝石更新了以下内容:

storage.yml

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

development.rb

config.active_storage.service = :cloudinary

我下一步可以尝试什么?

我认为唯一可能缺少的是,活动存储不会将文件夹存储为密钥的一部分,例如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")

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

最新更新