Okay, so this is my third day trying to solve this issue by myself, but I think it's about time to ask for help hehe! I couldn't find any documentation that helps me to find a solution, so I'm publishing the problem here to see if I can get some luck!

好了，这是我第三天试图自己解决这个问题，但我认为是时候寻求帮助了呵呵！我找不到任何帮助我找到解决方案的文档，所以我在这里发布这个问题，看看我是否能找到一些运气！

From the form I can successfully upload images to Cloudinary, but when I attempt to display them on the view, the tag doesn't include the src attribute and it's url value.

从表单中，我可以成功地将图像上传到Cloudinary，但当我尝试在视图上显示它们时，标记不包括src属性和url值。

I'm leaving a link to the project/branch at the end of this text, so you can check the code if needed.

我在本文末尾留下了一个指向项目/分支的链接，以便您可以在需要时检查代码。

Things I've done:

我做过的事：

1. I've installed gem "dotenv-rails" to add the cloudinary's secret key, name, etc to ".env" file and gitignore it, so the keys are not published on Github witht he rest of the code.

# .env
CLOUDINARY_URL=cloudinary://298522699261255:***********************8@Qa1ZfO4syfbOC

2. Then I tested the link between the app and cloudinary. First I downloaded a few images:

curl https://c1.staticflickr.com/3/2889/33773377295_3614b9db80_b.jpg > san_francisco.jpg
curl https://pbs.twimg.com/media/DC1Xyz3XoAAv7zB.jpg > boris_retreat_2017.jpg

Then I uploaded them to Cloudinary successfully:

然后我成功地将它们上传到Cloudinary：

# rails c
Cloudinary::Uploader.upload("san_francisco.jpg")
Cloudinary::Uploader.upload("boris_retreat_2017.jpg")

#Then removed them from my local environment
rm san_francisco.jpg boris_retreat_2017.jpg

I used the Cloudinary tag to call the image in a view and pasted inside the image id assigned by Cloudinary:

我使用Cloudinary标记调用视图中的图像，并粘贴到Cloudinary分配的图像id中：

<!-- app/views/articles/index.html.erb -->
<%= cl_image_tag("wwvryof9dfmpnjubaqvz",
      width: 400, height: 300, crop: :fill) %>

3. I proceeded to install Active Storage

rails active_storage:install
rails db:migrate

4. Then I added a few code lines to the following file:

# config/storage.yml
cloudinary:
  service: Cloudinary
  folder: <%= Rails.env %>

5. After that I opened the development.rb file and edited the line that sets where to active storage will store stuff:

# config/environments/development.rb
# [...]
config.active_storage.service = :cloudinary

6. To my Article model I added the following:

class Article < ApplicationRecord
  has_one_attached :photo
end

# AND TO MY ARTICLE CONTROLLER
def create
    @article = Article.new(article_params)
    if params[:article][:photo].present?
      uploaded_image = Cloudinary::Uploader.upload(params[:article][:photo])
      @article.photo.key = uploaded_image['public_id']
    end

    if @article.save
      redirect_to @article
    else
      render :new, status: :unprocessable_entity
    end
  end

7. I added the form using simple form to new.html.rb

<h1>New Article</h1>
 <%= simple_form_for(@article) do |f| %>
  <!-- [...] -->
   <%= f.text_field :title %>
  </div>
  <div>
  <%= f.file_field :photo, as: :file %>
  </div>
  <div>
    <%= f.text_area :body %>
  </div>
  <div>
    <%= f.submit %>
  <!-- [...] -->
<% end %>

8. Finally, I added the image tag to the show.html.rb view this way:

<!-- app/views/articles/show.html.erb -->
<!-- [...] -->
<%= cl_image_tag @article.photo.key, height: 300, width: 400, crop: :fill %>

After following all those steps, I get the article with the tag with no src attribute like in this picture: Img tag displayed in inspect element

执行完所有这些步骤后，我获得了没有src属性的标记的文章，如图所示：img标记显示在Inspect元素中

The picture is uploaded to Cloudinary, but I cant get it displayed on the view. Any idea about solving this issue?

图片已上传到Cloudinary，但我无法将其显示在视图上。对解决这个问题有什么想法吗？

Remember you can checkout my code here: text

记住，您可以在此处签出我的代码：Text

Thank you!

谢谢!

Hana

哈娜