Image from HTML is not rendered in generated image

[Magesh-B]

I want to convert an HTML page into JPG image using IMGKit gem and wkhtmltoimage-binary, In my HTML page, there is a div class whose background is an image (styled inline), While converting this HTML page, the div background image is not rendered and remaining styles and contents are rendered in the generated image. I also tried IMG SRC tag in HTML, the image is not rendered if it's source is an url.

html = %Q[]

kit = IMGKit.new(html,:height => 300,:quality => 50)

img = kit.to_img

img = kit.to_img(:jpg)

file = kit.to_file('file.jpg')`

In the generated image, the img src is not rendered and it remains blank! It could be great if anyone help me figure out how to use url in image src.

[evidentsnow]

Also having this problem

[donrestarone]

experiencing the same problem here, anyone find a fix?

Here's my setup;

Gemfile

gem 'wkhtmltopdf-binary', "0.12.4"
gem "wkhtmltoimage-binary", "0.12.4"

[CarlosDomingues]

Looks like a wkhtmltopdf issue: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2913 Unfortunately, wkhtmltopdf is not mantained anymore. That said, I used the most recent workaround suggested in the issue and it worked for me:

<style>
img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}
</style>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
<script>window.onload = function () { twemoji.parse(document.body);}</script>

EDIT

MaxCDN has been retired and twemoji is unmaintained. I was able to keep this workaround working by using a fork:

<style>
img.emoji {
   height: 1em;
   width: 1em;
   margin: 0 .05em 0 .1em;
   vertical-align: -0.1em;
}
</style>
 <script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js"crossorigin="anonymous"></script>
<script>window.onload = function () { twemoji.parse(document.body); }</script>