Tobija Posts - Answer Overflow

Tobija

•Created by Tobija on 6/4/2024 in #❓・help

NuxtImage can't use images from /assets/ directory (when building)

I know this is somewhat of a common problem I've seen around quite often, but somehow I'm still very much confused about this. So I hope somebody can explain to me what's happening here. My situation: I'm using Nuxt 3.11.2 with @nuxt/image 1.7.0 and I want to use the base directory assets/images. Therefore I have my nuxt config as follows:

// nuxt.config.ts
image: {
  dir: "assets/images",
}

// nuxt.config.ts
image: {
  dir: "assets/images",
}

...and I use the component as follows:

<template>
  <NuxtImg src="/my-img.png" />
</template>

<template>
  <NuxtImg src="/my-img.png" />
</template>

This works flawlessly in local development, but when I run pnpm run build, the images in my assets directory simply get ignored and the images are missing on the site. No matter what I tried, I couldn't get it to work. Two things that do seem to work: 1. running pnpm run generate to create a static version of the website. But that's not what I want. 2. using a normal <img> tag with a source like this: <img src="~/assets/images/my-img.png"> Here's a minimal reproduction for good measures: https://stackblitz.com/edit/nuxt-starter-6xjdby?file=app.vue My questions: * Is this expected behavior? * Am I doing something wrong? * Are there workarounds?

7 replies

NNuxt

•Created by Tobija on 5/25/2023 in #❓・help

Statically Generating dynamic Meta Data despite using ssr: false

I'm using static site generation in combination with ssr: false. When I generate my nuxt 3 website, the meta data I add to the head in my config.nuxt.ts gets written in the statically generated html files. But everything I add inside my pages (either through the useHead composable or the Nuxt <Head> component) will not be generated in the static html files. Even though different index.html files are generated for the given pages. I suspect that using ssr: true would probably change this, but that comes with quite a lot of other changes I would need to make to my code. Is there any other way to get static meta data (e.g. open graph data) in my spa?

6 replies

Gaming

Programming