opt_interactive() conflicting with gt_img_rows()

Question

The following reproducible example works:

library(gt)
library(gtExtras)

data.frame(Animal=c("Cat", "Dog"),
           URL=c("https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1200px-Cat_August_2010-4.jpg", 
                 "https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*")) %>%
  gt() %>%
  gt_img_rows(URL, height=50)

But the following example turns the URL column back into text:

data.frame(Animal=c("Cat", "Dog"),
           URL=c("https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1200px-Cat_August_2010-4.jpg", 
                 "https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=1200:*")) %>%
  gt() %>%
  gt_img_rows(URL, height=50) %>%
  opt_interactive()

I am trying to sort a gt object using interactivity while preserving a rendered image. Do you have any tips?

I tried looking up the problem but couldn't find any relevant issues with opt_interactive().

Answer 1

For your use case you could use gt::fmt_image:

Note. There was an issue with the link for the second image though. I had to remove all the parameters related to cropping and resizing from the url.

library(gt)

tbl <- data.frame(
  Animal = c("Cat", "Dog"),
  URL = c(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Cat_August_2010-4.jpg/1200px-Cat_August_2010-4.jpg",
    "https://hips.hearstapps.com/hmg-prod/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg"
  )
) %>%
  gt() %>%
  fmt_image(URL, height = 50)

tbl %>%
  opt_interactive()

The issue does not only arise with gtExtras::gt_img_rows but also when adding an image using gt::web_image, i.e. when you try to make the example from ?web_image interactive it will only display the underlying text. I can only guess that this happens because both use or require to use text_transform.