Local image paths not working for HTML content

[twu13]

I am trying to replicate the exact example in the below code which uses custom HTML content to add images to the boxes. I have a folder in the same directory as my markdown file called "flags" and all of the png files in there, but for some reason when I render the HTML document the images do not show up (can't resolve the path). Is there some special configuration needed here?

Thanks!

# Template for world cup HTML of each item
templateWC <- function(stage, team1, team2, score1, score2) {
  sprintf(
    '<table><tbody>
      <tr><td colspan="3"><em>%s</em></td></tr>
      <tr>
        <td>%s</td>
        <th>&nbsp;%s - %s&nbsp;</th>
        <td>%s</td>
      </tr>
      <tr>
        <td><img src="flags/%s.png" width="31" height="20" alt="%s"></td>
        <th></th>
        <td><img src="flags/%s.png" width="31" height="20" alt="%s"></td>
      </tr>
    </tbody></table>',
    stage, team1, score1, score2, team2, gsub("\\s", "", tolower(team1)),
    team1, gsub("\\s", "", tolower(team2)), team2
  )
}

# Data for world cup 2014
dataWC <- data.frame(
  id = 1:7,
  start = c(
    "2014-07-04 13:00",
    "2014-07-04 17:00",
    "2014-07-05 13:00",
    "2014-07-05 17:00",
    "2014-07-08 17:00",
    "2014-07-09 17:00",
    "2014-07-13 16:00"
  ),
  content = c(
    templateWC("quarter-finals", "France", "Germany", 0, 1),
    templateWC("quarter-finals", "Brazil", "Colombia", 2, 1),
    templateWC("quarter-finals", "Argentina", "Belgium", 1, 0),
    templateWC("quarter-finals", "Netherlands", "Costa Rica", "0 (4)", "0 (3)"),
    templateWC("semi-finals", "Brazil", "Germany", 1, 7),
    templateWC("semi-finals", "Netherlands", "Argentina", "0 (2)", "0 (4)"),
    templateWC("final", "Germany", "Argentina", 1, 0)
  )
)

[daattali]

Are you able to show the image in a regular <img> tag in a minimal shiny app? That's the first step you should take to try to come up with a minimal reproducible example

[twu13]

@daattali Thanks for responding! Yes I can get the images to show up using a basic tag. I believe this issue has to do with the fact that I'm using runtime: shiny for my markdown (I need it for shiny capabilities), because when I remove that and try to render a regular Rmd html file it works as expected.

Two things I observed:

1. When I run the markdown with 'runtime: shiny` I'm seeing an "embedded null" error... This happens even if I comment out the code entirely (I have to delete it to get past it).

2. To overcome the above issue, I tried to edit the tags in the "content" column to point to a specific image (e.g. flags/argentina.png) and it still can't seem find them, but putting a regular tag elsewhere in the markdown works just fine.

I have included a reproduceable example (with comments in the code): flag_example.zip

[daattali]

Oh this is a Rmd file, not a shiny app. To be honest shin within rmd is a different beast and I don't know how it works too well. I just tried running your example, and it looks like the argentina flag that renders on the page ends up getting a file path of file125c38749a2_files/flags/argentina.png. Shiny is doing with the image paths somewhere, I don't know what it's doing. I'm afraid I can't help with this.

[daattali]

This feels like an rmd issue, not a timevis issue, so closing this