CSS and images from embedded HTML inside a Quarto book do not render #1506
Description
Bug description
Embedding HTML inside of book does not seem to work.
In the root of my project directory I have :
- a quarto file called test1.qmd that contains
---
title: "test1"
---
```{r}
#| echo: false
knitr::include_url({"x.html"})
```- a YAML file called _quarto.yml that contains:
project:
type: book
title: "test"
book:
title: "CSS Notes"
author: "Me"
date: "7/22/2022"
chapters:
- index.qmd
- test1.qmd
format:
html:
theme: cosmo- a html file called x.html that contains
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>What is CSS?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="./img/image.jpeg">
<div class="content">
<h3>Where is my rUM?</h3>
<button>Click Here</button>
</div>
</div>
</body>
</html>- a css file called style.css that contains
.container {
width: 400px;
margin: auto;
background: #eee;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px 5px 0 0;
box-shadow: 5px 7px 15px #ccc;
}
.container img {
width: 100%;
border-radius: 5px 5px 0 0;
}
.content {
padding: 10px;
text-align: center;
font-family: sans-serif;
}
.content h3 {
color: #777;
}
.content button {
padding: 10px 20px;
margin-bottom: 10px;
background: coral;
font-size: 15px;
color: #fff;
outline: none;
border-radius: 20px;
border: none;
box-shadow: 3px 5px 10px #ccc;
transition: all .2s;
}
.content button:hover {
background: orangered;
}-
an empty index.qmd file
-
a child directory called img containing an image file called image.jpeg
When I click Render Book in the Build tab of RStudio IDE the book renders. The content of the embedded page appears without the image or the ccs styling. The Background Jobs tab tells me
Watching files for changes
Browse at http://localhost:7932/
GET: /
GET: /test1.html
GET: /x.html
/style.css (404: Not Found)
/img/image.jpeg (404: Not Found)
If I remove the type: book line from the YAML file ... :
project:
title: "test"
book:
title: "CSS Notes"
author: "Me"
date: "7/22/2022"
chapters:
- index.qmd
- test1.qmd
format:
html:
theme: cosmo... and click Render on the test1.qmd file, the page renders showing the image and using the CSS.
Is this a bug or am I botching the syntax somewhere (or doing something else wrong)?
I am running RStudio IDE: 2022.07.0 Build 548 on macOS Monterey Version 12.4.
I can do a show and tell at RStudio::conf if it helps....
quarto check Output
[✓] Checking Quarto installation......OK
Version: 1.0.35
Path: /Applications/quarto/bin
[✓] Checking basic markdown render....OK
[✓] Checking Python 3 installation....OK
Version: 3.8.9
Path: /Applications/Xcode.app/Contents/Developer/usr/bin/python3
Jupyter: 4.11.1
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking R installation...........OK
Version: 4.2.0
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.2-arm64/Resources/library
rmarkdown: 2.14
[✓] Checking Knitr engine render......OKquarto tools check Output
[✓] Inspecting tools
Tool Status Installed Latest
chromium Not installed --- 869685
tinytex Up to date v2022.07 v2022.07Checklist
- formatted your issue so it is easier for us to read?
- included a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
- documented the quarto version you're running, by pasting the output from running
quarto checkin the "Quarto Check Output" text area? - documented the version of the quarto tools you're running, by providing the output from running
quarto tools checkin the "Quarto Tools Check Output" text area? - documented the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
- documented which operating system you're running? If on Linux, please provide the specific distribution as well.
- upgraded to the latest version, including your versions of R, the RStudio IDE, and relevant R packages?