local images do not load

[FBartos]

Hi, I wanted to add local images to the network, but I can't figure out how to do so.

I managed to reproduce the example without an error,

library(visNetwork)

path_to_images <- "https://raw.githubusercontent.com/datastorm-open/datastorm-open.github.io/master/visNetwork/data/img/indonesia/"

nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(path_to_images, 1:4, ".png"),
                    label = "I'm an image")

edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)

But whenever I try using any other images, just blank nodes appear. For example, I downloaded the corresponding images to my working directory from https://github.com/datastorm-open/datastorm-open.github.io/tree/master/visNetwork/data/img/indonesia
such as

> list.files()
[1] "1.png"  "2.png"  "3.png"  "4.png"  "test.R"

then

nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(1:4, ".png"),
                    label = "I'm an image")

edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)

results in

without any errors or warnings

[philibe]

It seems that vis js accepts only URLs.

• https://visjs.github.io/vis-network/docs/network/nodes.html?keywords=image
• look for "this option should be the URL to an image" to get image settings.

When the shape is set to image or circularImage, this option should be the URL to an image. If the image cannot be found, the brokenImage option can be used. Note: Firefox has a SVG drawing bug, there is a workaround - add width/height attributes to root element of the SVG.

workaround:

library(shiny)
library(visNetwork)

nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    image = paste0(1:4, ".png"),
                    label = "I'm an image")

edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)


ui=fluidPage(
  div(
    # images hidden but reachable from URL 
    img(src='1.png'), # location: www/1.png
    img(src='2.png'), # location: www/2.png
    img(src='3.png'), # location: www/3.png
    img(src='4.png'), # location: www/4.png
    style="display: none;"
  ),
  visNetworkOutput("netw")
)
server=function(input, output,session) {
  
  output$netw <- renderVisNetwork(
    visNetwork(nodes, edges, width = "100%") %>% 
      visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
      visLayout(randomSeed = 2))
}
shinyApp(ui,server)

[FBartos]

ah, I missed that point in the documentation, thanks!

I tried the suggested workaround but it does not work for my locally. Could it be I'm running Windows?

[philibe]

I am on Linux but on Windows it's same in this case.

• Have you put the images in a sub directory www under this of test.R ?
• Have you typed setwd( your full path of YourAppDir) ?
• Temporarily with display: block;, are the images displayed in the <div> ?

|
+ YourAppDir/
    + test.R
    + www/
           + 1.png
           + 2.png
           + 3.png
           + 4.png

www is the mandatory name. But you could have under what you want www/AnotherDir (with \ for Windows).

[FBartos]

Thanks for the extended answer and help!

I have the correct structure, but I still don't see icons. The issue now seems to be on my side, however, because changing to display: block; does not show the images. I will see how can I fix that on my own. Thanks!

Do you plan to implement showing images from local paths without the shinyapp sidestep in the future?

[philibe]

The issue now seems to be on my side, however, because changing to display: block; does not show the images.

Yes, you have to manage that before. :)

Do you plan to implement showing images from local paths without the shinyapp sidestep in the future?

I'm a simple user, not from datastorm-open/visNetwork's team nor visjs/vis-network's team.

I like very much these packages, but don't expect too much about updates, because they have not changes since some years:

• activity of R wrapper of vis js: https://github.com/datastorm-open/visNetwork/graphs/contributors
• activity of vis js: https://github.com/visjs/vis-network/graphs/contributors

[philibe]

But I've found another answer from @Fideldue on Aug 21, 2018, without Shiny nor URLs :

• datastorm-open/visNetwork "How to specify local path for images? #65

• It's possible to include images base64 encoded

Copy-paste + some adaptations:

library(visNetwork)

myfulldir <- " my full path"

node <- NULL
nodes <- data.frame(id = 1:4, 
                    shape = c("image", "circularImage"),
                    label = "I'm an image")



# Load in the dataframe the images, which are in myfulldir, in base64 encoded. 
# The parameter is the id (1:4) to look for paste0(myfulldir,"/",x,".png")
# (don't forget to change "/" to "\" for Windows)

nodes$image=lapply(
  nodes$id, 
  function(x) {
    paste(
      'data:image/png;base64',
      RCurl::base64Encode(
        readBin(
          paste0(myfulldir,"/",x,".png"),  
          'raw', 
          as.integer(file.info(paste0(myfulldir,"/",x,".png"))$size)
        ),
        "txt" 
      ),
      sep = ','
    )
  }
)

edges <- data.frame(from = c(2,4,3,3), to = c(1,2,4,2))

visNetwork(nodes, edges, width = "100%") %>% 
  visNodes(shapeProperties = list(useBorderWithImage = TRUE)) %>%
  visLayout(randomSeed = 2)