Support local assets in stylesheets and inline styles

[mbostock]

Framework does static analysis of HTML and JavaScript to find references to local assets, such as linked images and imported JavaScript modules; however, it doesn’t currently perform static analysis of stylesheets and inline styles, so attempting to reference local images and import other local stylesheets currently breaks. Here are a few examples (that can serve as test cases for this feature).

An inline stylesheet that references a local image:

<style type="text/css">

body {
  background-image: url("image.png");
}

</style>

A linked local stylesheet that references a local image:

<link rel="stylesheet" href="test.css" type="text/css">

Alternatively, via @import (which is currently also unsupported for local stylesheets, and should be considered part of this issue):

<style type="text/css">

@import url("./test.css");

</style>

And the following stylesheet:

body {
  background-image: url("image.png");
}

An inline style that references a local image:

<div class="card" style="background-image: url('image.png');">
  I have a background image.
</div>

Related #415 #416 #423 #467 #474 #786 #788 #1372.

[Arijitdesignsit]

I have been trying to go around this issue for a long time now. I am able to solve it via D3js today. So, I just simply took the served absolute URL of the image by

const imgURL = await FileAttachment("./exampleImage.jpg").href;

Then by doing the following I am able to put a background image in a div with id divId:

d3.select("#divId").style("background-image", "url("+imgURL+")");