bookdown | image with a weblink

[lennylin]

I want to insert an image in a rmd file in a book project with bookdown. I also want to click it and a webpage will be popped up in a new tab on a browser.

I figured out a solution, which is:

1. to add an image to _book\images
2. to run the following html

<a href = "webpage" target ="_blank" rel = "noopener noreferrer">
<img src ="./images/image.png">
</a>

However I feel it may not be a better way. I intend to run a code chunk at first as follows, then run above html.

{r fig0014, echo = F, message = F, warning = F}
knitr::include_graphics("./images/image.png")

When going this route, I did:

1. to create a folder called images under the project folder.
2. to add an image to this folder.
3. to run above code chunk.

The outcome of running the code chunk followed by html is two images are appeared. I have no idea of hiding the image generated from the code chunk.

[cderv]

@lennylin

The outcome of running the code chunk followed by html is two images are appeared.

Are you running both ?

• include_graphics will produce some code to include the image
• Your HTML code also include an image

So it seems normal to me that you get two images

[lennylin]

Hi Chris,

Yes, I ran both.

I think what knitr::include_graphics() does is to 'copy' the image file under project/images folder and 'paste' it under project/_book/images folder. I do need knitr::include_graphics() for this purpose, but I don't want it to show the image.

As I said, I could simply put the image under project/_book/images folder manually and don't run knitr::include_graphics(). It would be a work-around solution. But I questioned myself that it is not a consistent approach and if it is a good practice.

[cderv]

@lennylin

I think what knitr::include_graphics() does is to 'copy' the image file under project/images folder and 'paste' it under project/_book/images folder. I do need knitr::include_graphics() for this purpose, but I don't want it to show the image.

It is not exactly this command that does that. I believe by using this command, it will output some content that is correctly parsed by rmarkdown to find the resource. Hence the copy. But the function does not copy.
So possibly this is a syntax parsing issue.

@lennylin

but I don't want it to show the image.

You can't just don't show the image when using knitr::include_graphics() because that is its sole purpose. This goes with the assumption of the function copying while its not. So you need to use another syntax or include resource manually

@lennylin

As I said, I could simply put the image under project/_book/images folder manually and don't run knitr::include_graphics(). It would be a work-around solution. But I questioned myself that it is not a consistent approach and if it is a good practice.

You are right this is now how it should work _book is a folder where files should be written by bookdown itself.

@lennylin

<a href = "webpage" target ="_blank" rel = "noopener noreferrer">
<img src ="./images/image.png">
</a>

By the way, this could be written in Markdown this way:

[![](images/image.png)](webpage){target="_blank" rel="noopener noreferrer"}

The above should work to copy the file in the right folder.

I'll investigate what is making the resource copying fail...

[cderv]

@cderv

So possibly this is a syntax parsing issue.

I believe this is it. Can you just remove space between attributes name and = ?

<a href="webpage" target="_blank" rel="noopener noreferrer">
<img src="./images/quarto.png">
</a>

This should now find the image and copy the resource with others in output dir