How to set absolute paths to content assets?

[jvolker]

First of all, thanks a lot for creating this!

Background

I would like to create a gallery with a preview image of each content page like this:

<template v-for="project in projects" :key="project._path">
    <img :src='`${project._path}/project_preview.jpg`' />
</template>

projects are located in a subfolder of the content directory and accessed via queryContent().

Issue

I can't seem to figure out how to set the correct path to those images. Most examples in the Readme show relative paths but I think I need an absolute path. Also, the ultimate goal for me here is to use Nuxt Image.

Thanks in advance!

[davestewart]

Hey @jvolker!

You should just be able to reference the image as it would be served / built:

index -> /projects/some_project/
image -> /projects/some_project/project_preview.jpg

I'll update the demo with an example :)

[jvolker]

Thanks for getting back to me and adding the demo, which is working for me. Unfortunately, this is not exactly what I was looking for.

It seems to be working from within the markdown file. But in this case, I'm referencing the content images from the landing page using the component. Nuxt image seems to render the paths okay. They look similar to the output of the markdown files.

<nuxt-img src='/work/project/_project_thumbnail.jpg' sizes="sm:100vw md:50vw lg:1600px" />

is converted to

<img src="/_ipx/w_3200/work/project/_project_thumbnail.jpg" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 1600px" srcset="/_ipx/w_384/work/project/_project_thumbnail.jpg 384w, /_ipx/w_640/work/project/_project_thumbnail.jpg 640w, /_ipx/w_768/work/project/_project_thumbnail.jpg 768w, /_ipx/w_1280/work/project/_project_thumbnail.jpg 1280w, /_ipx/w_1600/work/project/_project_thumbnail.jpg 1600w, /_ipx/w_3200/work/project/_project_thumbnail.jpg 3200w">

But opening http://localhost:3000/_ipx/w_3200/work/project/_project_thumbnail.jpg is returning this error: IPX Error: Error: File not found (…/.nuxt/content-assets/public/work/project/_project_thumbnail.jpg)

Any help would be highly appreciated. Thank you!

[jvolker]

I've made some progress on this one.

The first part of my problem was due to this bug/issue of images with leading underscores not being picked up by this module: https://github.com/davestewart/nuxt-content-assets/issues/59

Second, it seems that the image paths defined in the front matter somehow get added their sizes as URL parameters. Eg.

In the front matter: preview : project_thumbnail.jpg turns into: /work/my-project/project_thumbnail.jpg?width=3000&height=2000

Nuxt image can't seem to find the image in that case. I solved this by removing those parameters before passing them to Nuxt Image:

Fails: <nuxt-img :src='project.preview' sizes="sm:100vw md:50vw lg:1600px" /> Works: <nuxt-img :src='project.preview.replace(/\?.*$/, "")' sizes="sm:100vw md:50vw lg:1600px" />

Which changes the source from eg. /work/my-project/project_thumbnail.jpg?width=3000&height=2000 to /work/my-project/project_thumbnail.jpg

[davestewart]

Hey @jvolker...

Second, it seems that the image paths defined in the front matter somehow get added their sizes as URL parameters

You are right; and in fact this tripped me up today and from v1.4.1 I've made image size hints opt-in, and added a warning to the docs to not use image size hints with Nuxt Image.

The Nuxt Image error is unfortunate, as it doesn't give any clue as to why it's forbidden:

{
  "error": {
    "message": "[403] [IPX_FORBIDDEN_PATH] Forbidden path: /assets/images/sicilian-fish-stew.jpg?width=100"
  }
}

Anyway, remove the query and it works.

[davestewart]

OK, the latest v1.4.3 is now out and should successfully fix these issues, and render in SSG.

If you can let me know if it's working for you, that would be great :)