Nuxt•2y ago

How do i show image from public in header?

Currently i use this to get the image url:

<script setup lang="ts">
useSeoMeta({
  ogImage: new URL("/public/image/test.png",
        import.meta.url
      ).href,
});
</script>

<script setup lang="ts">
useSeoMeta({
  ogImage: new URL("/public/image/test.png",
        import.meta.url
      ).href,
});
</script>

But this doesnt work in nuxt generate it just returns the real path on the hard drive. (Example:

file:///C:/nuxt/.output/.../test.png

file:///C:/nuxt/.output/.../test.png

) Not the dynamic path from nuxt. What is the default way to get the image urls for meta tags?

3 Replies

Fabian B.•2y ago

Hey, import.meta.url is not the right variable to use here. Check out: https://unhead.harlanzw.com/guide/guides/useseometa for a general docs on this.

Unhead

useSeoMeta

The simplest way to add meta tags to your site.

Fabian B.•2y ago

Since your nuxt generate doesn’t know on which domain it lives, if you want to make that part dynamic, you have to set a runtimeConfig.public variable in your nuxt.config.ts. So in your case (notice we don't need /public) since your /image/test.png will be served from the domain root.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://yourproddomain.com/image/test.png',
});
</script>

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://yourproddomain.com/image/test.png',
});
</script>

-- or --

//.env
NUXT_PUBLIC_BASE_URL=https://yourproddomain.com

//.env
NUXT_PUBLIC_BASE_URL=https://yourproddomain.com

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_PUBLIC_BASE_URL
    }
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      baseUrl: process.env.NUXT_PUBLIC_BASE_URL
    }
  },
})

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
useSeoMeta({
  ogImage: new URL('/image/test.png', runtimeConfig.public.baseUrl),
});
</script>

<script setup lang="ts">
const runtimeConfig = useRuntimeConfig()
useSeoMeta({
  ogImage: new URL('/image/test.png', runtimeConfig.public.baseUrl),
});
</script>

Dani (ダニー)OP•2y ago

using

runtimeConfig.public.baseUrl

runtimeConfig.public.baseUrl

Is a good solution for dev and prod env thanks!

Gaming

Programming

How do i show image from public in header?