0

I'm using Nuxt v3.0.0-rc.12.

I have a component that needs to show an image, but the image path changes based on the image prop:

<template>
  <img alt="" :src="resolvedImage">
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  image: {
    default: '',
    type: String
  }
})

const resolvedImage = computed(() => {
  return props.image ? new URL(props.image, import.meta.url).href : ''
})
</script>

And I use this component like that:

<my-component image="../assets/somefolder/filename.png" />

I've read in the Vite docs that the correct way to do that is with new URL(url, import.meta.url). It works, but not in the first page load (because SSR).

I get this warning and the image is not displayed.

nuxt warning

What am I doing wrong?

kissu
  • 40,416
  • 14
  • 65
  • 133
Caio Tarifa
  • 5,973
  • 11
  • 46
  • 73
  • Check that one for various reasons as of why this is happening: https://stackoverflow.com/a/67978474/8816585 As of how to solve it, I'm not fully sure here but you could check the difference by either disable the JS on the page (or checking the source code) VS when your app is fully hydrated to spot the differences. Props are sync, and `URL` is available on Node's side, so I guess that `computed` in Vue3 are not immediate for some reason? Maybe using a `watch` [with `immediate`](https://vuejs.org/api/reactivity-core.html#watch) is the way to go to resolve the `resolvedImage` here. – kissu Oct 28 '22 at 21:25
  • Also, I recommend that you use [`~` for your assets](https://v3.nuxtjs.org/getting-started/assets/#example-1), relative links are more error-prone. – kissu Oct 28 '22 at 21:27
  • Given [vite's documentation](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url), you cannot use `import.meta.url` to build the URL because the server cannot determine the host. – nook Mar 21 '23 at 13:43

0 Answers0