I'm using ruby 3.0.0 and rails 6.1.3.2. I've looked into many examples, but haven't found a solution to finally show images inside a PDF. The PDF renders (CSS is also working), but images appear as empty/not found. If I go to their URL, I can see them, though.
Just to clarify, a certificate belongs to a certificate_template and has_one_attached :pdf. A certificate_template has_one_attached :brand_logo, :signature.
# controllers/admin/certificates_controller.rb
def view_pdf
@certificate = Certificate.find(params[:certificate_id])
if !@certificate.pdf.attached?
pdf = WickedPdf.new.pdf_from_string(
render_to_string(template: 'admin/certificates/view_pdf.html.erb', layout: 'application.pdf.erb')
)
@certificate.pdf.attach(io: StringIO.new(pdf), filename: "#{@certificate.path.title} - #{@certificate.user.name}.pdf", content_type: 'application/pdf')
end
respond_to do |format|
format.html
format.pdf do
render pdf: url_for(@certificate.pdf), content_type: 'application/pdf', template: 'admin/certificates/view_pdf.html.erb', page_size: 'A4', layout: 'application.pdf.erb', orientation: 'Landscape', zoom: 1, dpi: 75, disposition: 'inline'
end
end
end
# views/admin/certificates/view_pdf.html.erb
<div class="template-frame">
<div class="template-text">
<br /><br />
<%# Brand logo %>
<% if @certificate.certificate_template.brand_logo.attached? %>
<%= wicked_pdf_image_tag url_for(@certificate.certificate_template.brand_logo), width: '400px' %>
<% elsif current_tenant && current_tenant.has_custom_domain? && @theme %>
<%= wicked_pdf_image_tag url_for(@theme.brand_logo), width: '400px' if @theme.brand_logo.attached? %>
<% end %>
<br /><br /><br /><br />
<%# Title and Date %>
<div class="title-date">
<h3 class="certificate-title serif">Certificate of Completion</h3>
<p id="template-date" class=<%= "my-0 #{'hide-element' unless @certificate.certificate_template.show_date}" %>>was awarded on <%= Date.today.strftime("%m/%d/%Y") %> to</p>
</div>
<%# Name of user and course %>
<div class="user-course">
<div class="user-hr">
<h3 class="serif name"><%= @certificate.user.name %></h3>
<hr>
</div>
<br />
<p class="for-completing">for completing the course</p>
<h3 class="serif course-name"><%= @certificate.path.title %></h3>
<p class=<%= "#{'hide-element' unless @certificate.certificate_template.show_course_description} course-description" %>>
<%= @certificate.certificate_template.course_description %>
</p>
</div>
<%# Signature %>
<br /><br /><br /> <br />
<div class="template-signature" class=<%= "hide-element" unless @certificate.certificate_template.show_signature %> >
<% if @certificate.certificate_template.signature.attached? %>
<%= wicked_pdf_image_tag url_for(@certificate.certificate_template.signature), width: '400px' %>
<hr>
<p class="serif"><%= @certificate.certificate_template.printed_name %></p>
<p><%= @certificate.certificate_template.printed_position %></p>
<% end %>
</div>
</div>
</div>
# views/layouts/application.pdf.erb
<!DOCTYPE html>
<html>
<head>
<title>Certificate</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= wicked_pdf_stylesheet_link_tag "pdf" %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
</head>
<body>
<%= yield %>
</body>
</html>
After trying all kinds of solutions, here is what worked for me:
<%= wicked_pdf_image_tag(polymorphic_url(@certificate.certificate_template.brand_logo), width: "400px") %>