search

davestewart / nuxt-content-assets

Enable locally-located assets in Nuxt Content
https://npmjs.com/package/nuxt-content-assets
108 stars 7 forks source link

404 when trying to locate image #64

Closed richard-edwards closed 2 months ago

richard-edwards commented 3 months ago

Background

I just set up the module with the standard defaults, I have not provided any additional configuration.

Issue

I'm getting a 404 for the image when it's passed as a blog image src in frontmatter but if I just embed it into the article it's working fine.

---
title: My title
description: My description
image:
  src: media/makepicks.png
---

# How to Create a Winning Golf Pool Team: A Step-by-Step Guide

![makepicks](media/makepicks.png)

The image/src in the frontmatter is consumed by a blog index page that shows that image for the blog article. Currently for that I'm getting the following error:

{
  "error": {
    "message": "[404] [IPX_FILE_NOT_FOUND] File not found: /30.blog/How to Create a Winning Golf Pool Team/media/makepicks.png"
  }
}

The image that is directly referenced is fine and it resolves correctly to http://localhost:3000/30.blog/How%20to%20Create%20a%20Winning%20Golf%20Pool%20Team/media/makepicks.png

The blog index page is using a component from Nuxt UI (UBlogPost https://ui.nuxt.com/pro/components/blog-post). I believe it uses Nuxt Image for the image. The type for each blog post is this:

export interface BlogPost extends ParsedContent {
  title: string
  description: string
  date: string
  image?: HTMLImageElement
  badge?: Badge
  authors?: ({
    name: string
    description?: string
    avatar?: Avatar
  } & Link)[]
}

I'm sure it's something simple I'm missing.

davestewart commented 2 months ago

Hi Richard,

Sorry for the delay, I've not had much time for OSS in a while!

I think there might have been some changes in Nuxt Image which mean the old advice for making things work isn't working any more, and I'm actually looking at that as part of an update I'm doing now.

Hopefully can have a resolution in the next few days.

davestewart commented 2 months ago

Having looked at things a bit, it seems that NCA is breaking Nuxt Image.

If I remove NCA from the playground, NI serves images correctly from the _ipx route, and if I put it back, it breaks.

This is obviously not great, but it gives me somewhere to start looking.

richard-edwards commented 2 months ago

Thanks for looking into this Dave. For now I've just moved the images into the public folder and accessed them with a relative url from the root ie. /blog/xx.jpg which I have in /public/blog. Ideally I'd like to have them reside with the article, especially if there are lot of imagea in the article.

davestewart commented 2 months ago

No worries Richard, and sorry for the false promise!

Once I get over this issue, I'm going to see if I can run a separate ipx instance (as AFAICT they're designed to serve only a single folder).

Thread on DIscord:

davestewart commented 2 months ago

OK, some good news!

It seems that IPX does support more than one root folder, and the idiomatic way to do this is via layers.

I've run a test and making the hidden folder .nuxt/content-assets a layer does indeed serve its assets, alongside the main public folder.

So let me try and solve the first bug, then pull the rest of this together and in theory Nuxt Image should start working.

I can't promise an exact timescale right now, but it looks doable, at least.