How to insert an clickable image in shiny R.

[Subhani]

I am new to shiny R. Trying to build a shopping webapp.
If we select a product "Apple" from mobiles, it should display product image and if we click that image it should take us to other/link page.

Kindly help me on this.
Below is my code.

library(shiny)
library(shinydashboard)
library(readr)
library(shinyalert)
library(htmltools)

trend_data <- read_csv("data/trend_data.csv")

####################################### Header #############################

header <- dashboardHeader(

title = span(
"SHOPKART ",
style = "font-family: Tahoma; font-weight: bold"
),
titleWidth = "350px",

dropdownMenu(type = "tasks",

           messageItem(
             from = "Cart",
             message = "Want to add more?",
             icon = icon("cart-plus")
             
           )),

dropdownMenu(type = "messages",

           messageItem(
             from = "Offer",
             message = "50% off on clothing",
             icon = icon("hand-point-right")
             
           ))

)

####################################### Search #############################

sidebar <- dashboardSidebar(
useShinyalert(),
width = "350px",
sidebarMenu(
sidebarSearchForm(
textId = "search_text",
buttonId = "search_button",
label = "What are you looking for?",

),



####################################### Mobiles #############################    

selectInput(
  inputId = "mobiles", width = "350px",
  label = "Mobiles:",
  choices = unique(trend_data$type),

 
),

####################################### Clothing #############################

menuItem(
  text = span("Clothing", style = "font-size: 17px"),
  tabName = "cloth",
  icon = icon("tshirt"),
  menuSubItem(text = "Women", tabName = "women"),
  menuSubItem(text = "Men", tabName = "male"),
  menuSubItem(text = "Kids", tabName = "kid")
  
),

####################################### Electronics #############################

menuItem(
  text = span("Electronics", style = "font-size: 17px"),
  tabName = "elec",
  icon = icon("tv"),
  menuSubItem(text = "Laptops", tabName = "lap"),
  menuSubItem(text = "Televisions", tabName = "Tel"),
  menuSubItem(text = "Home Theatres", tabName = "sound")
  
),

####################################### Books #############################

menuItem(
  text = span("Books", style = "font-size: 17px"),
  tabName = "Book",
  icon = icon("book-open"),
  badgeLabel = "New",
  badgeColor = "yellow"
),

br(),
br(),
br(),
hr(),

####################################### Signin #############################

menuItem(
  text = span("Sigin/Register", style = "font-size: 17px"),
  tabName = "sign",
  icon = icon("user-plus"),
  badgeLabel = "New User",
  badgeColor = "blue"
),

####################################### About us #############################

menuItem(
text = span("About us", style = "font-size: 17px"),
tabName = "about",
icon = icon("question")

),

####################################### Contact us #############################
menuItem(
text = span("Contact us", style = "font-size: 17px"),
tabName = "contact",
icon = icon("headset")

)

)

)

####################################### Body #############################

body <- dashboardBody(

imageOutput("mob"),

)

####################################### Dashboard Page #############################

ui <- dashboardPage(

skin = "blue",
title = "dash",
header = header,
sidebar = sidebar,
body = body
)

####################################### Server #############################

server <- function(input, output, session) {

observeEvent(input$search_button, {

if(input$search_text != "")

shinyalert("Coming Soon", type = "warning")

}

)

output$mob <- renderImage({

if(input$mobiles == "Apple"){

  return(list(
    
  
    
    src = "www/iphone.jpg",
    filetype = "image/jpg"
    
    
   
  ))}


  else{
    return(list(
      src = "www/shop.jpg",
      filetype = "image/jpg"
      
    ))
  }

})

}

####################################### Session #############################

shinyApp(ui = ui, server = server)

[gitdemont]

Hi,

library(shiny)
# we will use .png files from shiny package
shiny_imgs <- list.files(path = system.file(package = "shiny"), pattern = ".png", recursive = TRUE, full.names = TRUE)

# here we create ui with a #img_list selector
# and an empty div where clickable images will be shown
ui <- fluidPage(selectInput(inputId = "img_list", label = "logo", choices = basename(shiny_imgs),
                            selected = basename(shiny_imgs)[1], multiple = FALSE),
                div(id = "img_placeholder"))
server <- function(input, output, session) {
  # observer on selector change
  observeEvent(input$img_list, {
    path_to_img = shiny_imgs[basename(shiny_imgs) == input$img_list]
    # the structure is 
    # div
    #   |_a
    #     |_img
    # first children a tag from #img_placeholder is removed 
    removeUI(selector = "#img_placeholder>a", multiple = TRUE, immediate = TRUE)
    # then we insert an image into a a tag into the div
    insertUI(selector = "#img_placeholder", where = "afterBegin", multiple = FALSE, immediate = TRUE,
             # the href could also be changed on selector change 
             # for instance if you want to link to an url on apple and another url on banana and another of lemon...
             ui = tags$a(href="https://forum.posit.co/t/how-to-insert-an-clickable-image-in-shiny-r/111026?",
                         tags$img(height = 200, width = 200, 
                                  src = session$fileUrl(name = "logo", contentType = "data:image/png",
                                                        file = path_to_img))
             ))
  })
}
shinyApp(ui, server)