首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Rails调用文章中通过shrine上传的图片

在Rails中使用Shrine上传图片并在文章中调用,你需要遵循以下步骤:

1. 安装和配置Shrine

首先,你需要安装Shrine gem并在你的Rails应用中进行配置。

安装Shrine Gem

在你的Gemfile中添加Shrine:

代码语言:javascript
复制
gem 'shrine'

然后运行bundle install

配置Shrine

创建一个新的初始化文件来配置Shrine:

代码语言:javascript
复制
rails generate shrine:install

这将会创建一个config/initializers/shrine.rb文件,你可以在这里配置你的存储服务(例如本地文件系统、Amazon S3等)。

例如,配置本地存储:

代码语言:javascript
复制
Shrine.storages = {
  cache: Shrine::Storage::FileSystem.new('public', prefix: 'uploads/cache'),
  store: Shrine::Storage::FileSystem.new('public', prefix: 'uploads'),
}

2. 创建图片上传处理器

创建一个处理器来处理图片上传:

代码语言:javascript
复制
rails generate shrine:processor ImageProcessor

在生成的处理器中,你可以添加图片处理的逻辑,例如使用ImageMagick或MiniMagick。

3. 创建模型并附加 Shrine

在你的文章模型中附加Shrine:

代码语言:javascript
复制
class Article < ApplicationRecord
  include Shrine::Attachment.new(:image)
end

4. 迁移数据库

添加一个迁移来创建articles表并包含图片字段:

代码语言:javascript
复制
rails generate migration AddImageToArticles image:string

运行迁移:

代码语言:javascript
复制
rails db:migrate

5. 创建表单上传图片

在你的文章表单中添加图片上传字段:

代码语言:javascript
复制
<%= form_with model: @article, local: true do |form| %>
  <%= form.label :image %>
  <%= form.file_field :image %>
  <%= form.submit %>
<% end %>

6. 处理上传的图片

在你的文章控制器中处理图片上传:

代码语言:javascript
复制
class ArticlesController < ApplicationController
  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article, notice: 'Article was successfully created.'
    else
      render :new
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :content, :image)
  end
end

7. 显示上传的图片

在你的文章视图中显示上传的图片:

代码语言:javascript
复制
<%= image_tag @article.image_url(:medium) %>

这里:medium是你在Shrine配置中定义的一个图片变体。如果你没有定义任何变体,你可以直接使用:original

8. 配置图片变体

如果你需要不同尺寸的图片,可以在Shrine的初始化文件中配置图片变体:

代码语言:javascript
复制
Shrine.plugin :derivatives
Shrine.plugin :derivation_endpoint

Shrine.derivatives[:medium] = ->(io, context) {
  io.download do |original|
    MiniMagick::Tool.new('convert').call(original.path, '-resize', '300>', original.path)
  end
}

确保你已经安装了MiniMagick gem:

代码语言:javascript
复制
gem 'mini_magick'

然后在你的模型中使用这些变体:

代码语言:javascript
复制
class Article < ApplicationRecord
  include Shrine::Attachment.new(:image, versions: { medium: Shrine::Derivative[:medium] })
end

这样,你就可以在文章中调用通过Shrine上传的图片了。记得在实际部署时配置适当的存储服务,例如Amazon S3,以确保图片的安全存储和高效访问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券