Integrating dynamic images

[spandl]

I'm trying to dynamically create a block of HTML with an image, but it seems that during the compilation, the image isn't picked up.

d3.select(sideBar)
  .append('div')
  .attr('class', 'logo')
  .append('img')
  .attr('src', '../../assets/images/logo.png')

A similar approach works, if the image is placed somewhere on a *.md page and the path points to the built-directory

 logo.innerHTML = `<img src="../_file/assets/images/logo.png" alt="Logo" style="width: 44px; height: auto;" />`;

I have seen that including images in CSS isn't yet an option either. What would be the best strategy for now to make sure the images is loaded? Trying to place the HTML snippet on each page?

[mythmon]

You need to reference the file using FileAttachment.

d3.select(sideBar)
  .append('div')
  .attr('class', 'logo')
  .append('img')
  .attr('src', FileAttachment('../../assets/images/logo.png").href)
```

That will always resolve to the URL of the image when deployed, including when the filename includes a hash for uniqueness. It also tells Framework to include the file in your output bundle.

[spandl]

Thanks.

I am doing this in an external TypeScript module.

import {FileAttachment} from "@observablehq/stdlib";

Then I am trying all possible paths, place the image in the same folder or the root, because I don't know if script is looking from the page the script is called or directly from the script.

In all cases, I am getting FIle not found error

Here: Trying to catch the observable png

const test = FileAttachment("../../observable.png")

Any idea what I could do wrong?

[spandl]

Tried some other things...

If I call the file from the markup page

const test = FileAttachment("./logo.png")
console.log('MD FILE', test)

I am getting

{
  name: "logo.png",
  mimeType: "image/png",
  lastModified: NaN,
  size: NaN,
href: "http://localhost:3000/_file/dashboard/logo.png?sha=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
}

But there is no image exported to _file/dashboard

[mythmon]

What command are you running when you see that? The file will only be copied when you run the build command.

[spandl]

I am in dev mode. (observable preview)

But it works now!
I need to reference the file in a .md page
const test = FileAttachment("../logo.png")

And then I can use it in my TS module with the adjusted path, as the module is stored somewhere else.
const logoFile = FileAttachment("../../logo.png")

Will try tomorrow, if the build works properly, but this could work.

Thanks!

[spandl]

It magically works now. Thanks!