Skip to content

CSS and images from embedded HTML inside a Quarto book do not render #1506

@RaymondBalise

Description

@RaymondBalise

Bug description

Embedding HTML inside of book does not seem to work.

In the root of my project directory I have :

  1. a quarto file called test1.qmd that contains
---
title: "test1"
---

```{r}
#| echo: false
knitr::include_url({"x.html"})
```
  1. 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
  1. 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>
  1. 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;
}
  1. an empty index.qmd file

  2. 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......OK

quarto tools check Output

[✓] Inspecting tools

Tool         Status            Installed     Latest  
chromium     Not installed     ---           869685  
tinytex      Up to date        v2022.07      v2022.07

Checklist

  • 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 check in the "Quarto Check Output" text area?
  • documented the version of the quarto tools you're running, by providing the output from running quarto tools check in 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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions