See error if src is undefined.

[cfdxkk]

Version

dependencies:
  '@nuxt/image':
    specifier: ^1.4.0
    version: 1.4.0
  nuxt:
    specifier: ^3.10.3
    version: 3.10.3([email protected])
  vue:
    specifier: ^3.4.19
    version: 3.4.21
  vue-router:
    specifier: ^4.3.0
    version: 4.3.0([email protected])

Visual Studio Code: 1.87.2
Vue - Official: v2.0.7

Issue

ERROR: input must be a string (received undefined: undefined)
In my VS Code, It shows that src is optional and can be string or undefined , but if I actually use undefined I get this error.
My TypeScript was broked?

update: const imageUrl = ref<string>(""); also don't work and get error.

Minimal Reproduction

Source Code: https://github.com/cfdxkk/nuxt-image-undefined-src

app.vue

<template>
	<NuxtImg :src="undefined" />
</template>

or

app.vue

<script setup lang="ts">
	const imageUrl = ref<string>();
	if (false) {
		imageUrl.value = 'foo.jpg'
	}
</script>

<template>
	<NuxtImg :src="imageUrl" />
</template>

[cfdxkk]

update:

Use v-if with :src can temporary fix.

<script setup lang="ts">
	const imageUrl = ref<string>("");
</script>
<template>
	<NuxtImg v-if="imageUrl" :src="imageUrl" />
</template>

[oritwoen]

I had a similar problem too. Quite by accident, I discovered that adding the parameter: placeholder with the correct url link will display this placeholder image instead of an error if src is empty or has values not defined correctly. It's not a perfect solution but it works.

[danielroe]

resolved in #1300.