The background_img() function fills the background of a cell with an image from the web. The image must be provided with a http or https address. The difference between background_img() and embed_img() is the image in background_img() takes up the entire contents of a cell whereas embed_img() does not. background_img() can be used in conjunction with embed_img() and the image will be placed behind the image from embed_img(). background_img() will also directly accept a singular image URL within img that does not come from the column itself. Additionally, images can be assigned from another column by providing the name of the column containing the img URL's in quotes within img_ref. background_img() should be placed within the style argument of reactable::colDef.

## Usage

background_img(
data,
height = "100%",
width = "100%",
position = "center",
img = NULL,
img_ref = NULL
)

## Arguments

data

Dataset containing URL's to images

height

A value given for the height of the image. Can provide a percentage of the cell height or a value in px. Default height is 100 percent.

width

A value given for the width of the image. Can provide a percentage of the cell width or a value in px. Default width is 100 percent.

position

The alignment of the image within a cell. Options are "center", "top", "bottom", "left", "right". Default is "center".

img

Optionally provide a direct link to an image URL. Only one image can be provided using this option. Default is NULL.

img_ref

Optionally assign images from another column by referencing the name of the column in quotes. Default is NULL.

## Value

a function that renders a background image to a column containing a valid web link.

## Examples

## If no image links are in the original dataset, you need to assign them like so:
library(dplyr)
#> Warning: package 'dplyr' was built under R version 4.0.5
#>
#> Attaching package: 'dplyr'
#> The following objects are masked from 'package:stats':
#>
#>     filter, lag
#> The following objects are masked from 'package:base':
#>
#>     intersect, setdiff, setequal, union
data <- iris %>%
mutate(
img = case_when(
Species == "setosa" ~
Species == "versicolor" ~
Species == "virginica" ~
TRUE ~ "NA"))

reactable(data,
columns = list(
img = colDef(style = background_img())))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator ## By default, images are given a size of 100% to fill the entire cell, ## but you can adjust the size using height and width: reactable(data, columns = list( img = colDef(style = background_img(height = "50%", width = "50%")))) #> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## An image can be applied directly over an existing column using img:
reactable(data,
columns = list(
Species = colDef(
style = background_img(
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator ## Conditionally assigned images can be applied directly over an existing column using img_ref: reactable(data, columns = list( Species = colDef(style = background_img(data, img_ref = "img")))) #> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator