Search code examples
ruby-on-railsrubyactiveadminrails-activestorageruby-on-rails-7

Getting image to display rails application using Active Admin


First I would like to apologize if I'm asking a question that has been answered. I been looking and I can't find the answer I'm looking for or maybe I just don't understand the answers. I'm a Ruby novice trying to make the backend I need to work with my iOS application I'm working on.

I'm currently working on the front end for this web app.

Here's my TeamMember model:

class TeamMember < ApplicationRecord
    has_one_attached :main_image
end

Now I'm trying to get the image to display in my view and I don't know how to do that...I have

This is what I have in the view:

<% TeamMember.all.each do |member| %>
             <div class="row text-center section-content">
               <div class="col-lg-2 col-lg-offset-2">
                 <img class="img-circle" src="<%= member.main_image%>" alt="Generic placeholder image" width="140" height="140"> 
                 <h3><%= member.name%></h3>
                 <p><%= member.title%></p>
                 <div class="media-icons">
                    <hr>
                     <ul>
                       <li><a href="http://<%= link_checker(member.fb_link)%>"><i class="fa fa-facebook"></i></a></li>
                       <li><a href="http://<%= link_checker(member.linkedin_link)%>"><i class="fa fa-linkedin"></i></a></li>
                       <li><a href="http://<%= link_checker(member.twitter_link)%>"><i class="fa fa-twitter"></i></a></li>
                   </ul>
                   <hr>
                 </div>

               </div><!-- /.col-lg-4 -->

When I try that I get a broken image that says it's a generic image.

I don't know how to get the jpg image that I uploaded okay in Active admin.

I want to know how to do this, plus be able to get the url to the image for my json.

So basicaly there's two questions here.

1 - How do I get the image to display in my html view? 2 - How do I get the url to the file in json so I can have my iOS app download it.

I would like to thank you in advance for tolerating me and answering my newbie questions. I try to go with these ROR blogs but they be confusing me on topics like this.


Solution

  • 1 - How do I get the image to display in my html view?

    To display image, use url method to get the URL(if carrierwave or paperclip uploader is used) mentioned below:

    <img class="img-circle" src="<%= member.main_image.url %>" alt="Generic placeholder image" width="140" height="140"> 
    

    2 - How do I get the url to the file in json so I can have my iOS app download it.

    Locate the json file in views folder that powers json data to iOS app. If not found in views folder, paste in the controller method or request URL here.

    When the file is found, just append a key value pair as below, and parse the same key in your iOS app:

    {
    ...
        main_image_url: member.main_image.url
    ...
    }
    

    Make sure you have member object of class TeamMember available in the view