nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
360 stars 23 forks source link

Images cannot be resolved when a custom src folder is set #205

Closed baptistejamin closed 6 days ago

baptistejamin commented 1 month ago

Hello there :)

We have the current Nuxt configuration:

export default defineNuxtConfig({
  // Server-Side Rendering (SSG)
  ssr: true,
  target: "static",

  // Source Directory
  srcDir: "src/",

  // Directories
  dir: {
    assets: "assets",
    layouts: "layouts",
    middleware: "middleware",
    modules: "modules",
    pages: "pages",
    plugins: "plugins",
    public: "public",
    static: "static"
  }
  });

I spent some time discovering why images could not be discovered with a such component:

 div(
  style="background-image: url('/opengraph/background.png'); width: 100%;"
)

It turns out there could be an issue with this fonction:

https://github.com/nuxt-modules/og-image/blob/4e0fa43a92f7bad8544647fbd0e8e471d54b96e2/src/runtime/nitro/og-image/satori/plugins/imageSrc.ts#L12

root:public is hardcoded. In my case, with a custom srcDir, storage key becomes: root:src:public:opengraph:background.png and not root:public:opengraph:background.png

danielroe commented 1 month ago

I can confirm - experienced this in a project. I used a relative path to work around the issue as I was only prerendering the OG image rather than needing runtime support ...

harlan-zw commented 6 days ago

Thank you for the issue, sorry for the delay. This should be working correctly in 3.0.0-rc.54.