Passing src as a prop

[adhamfarrag]

In my project components I try to pass image src as a prop. It gives me this error of "input must be a string (received undefined: undefined)".

[danielroe]

Could you provide a reproduction?

[kylerits]

I am seeing the same thing

TypeError input must be a string (received undefined: undefined)

[Vue warn]: Missing required prop: "src"                                                                                                                     17:55:46

found in

---> <NuxtImg> at node_modules/@nuxt/image/dist/runtime/components/nuxt-img.vue
       <Hero> at components/parts/hero.vue
         <Pages/index.vue> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

 ERROR  [Vue warn]: Error in render: "TypeError: input must be a string (received undefined: undefined)"                                                             17:55:46

found in

---> <NuxtImg> at node_modules/@nuxt/image/dist/runtime/components/nuxt-img.vue
       <Hero> at components/parts/hero.vue
         <Pages/index.vue> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

The tag I used was simply:

 <nuxt-img
        src="/images/4k-wallpaper-conifers-desktop-wallpaper-1920x1080.jpg"
      />

Package.json dependencies:

"dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/svg": "^0.1.12",
    "nuxt": "^2.15.7",
    "nuxt-lazy-load": "^1.2.6",
    "tailwindcss-fluid-container": "^4.0.0",
    "v-click-outside": "^3.1.2",
    "vue-rellax": "^0.2.0",
    "vue-svg-loader": "^0.16.0"
  },
  "devDependencies": {
    "@nuxt/image": "^0.5.0",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^4.2.0",
    "@vue/test-utils": "^1.2.1",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.0.5",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^6.0.0",
    "jest": "^27.0.5",
    "lint-staged": "^11.0.0",
    "vue-jest": "^3.0.7"
  }

[kylerits]

It looks like it is in conflict with the 'nuxt-lazy-load' module. Removing this module fixed the error.

[shadow81627]

Is #249 related?

My 404 page is giving a similar error.

Code Production 404 page

[adhamfarrag]

@kylerits I'm using nuxt-lazy-load as well.. but when I removed it still the same error.

[adhamfarrag]

@shadow81627 I can't see your code, but if you make a resuable component and trying to pass src a a props. then yes. May I see your code ?

[shadow81627]

@adhamfarrag here is the code

<template>
  <v-img
    sizes="100vw"
    :lazy-src="$img(src, { width: 10 })"
    :src="$img(src, { quality: 70 })"
    :srcset="_srcset.srcset"
    height="100vh"
    width="100vw"
  >
    <v-container class="fill-height" fluid>
      <v-row class="align-self-center">
        <v-col align="center">
          <v-card id="message" max-width="360" class="text-left">
            <v-card-subtitle class="text--primary pb-0">
              <h2
                class="font-weight-bold text-subtitle-1"
                style="letter-spacing: 3px"
              >
                404
              </h2>
            </v-card-subtitle>
            <v-card-title class="pt-0">
              <h1 class="text-h5 font-weight-light" style="letter-spacing: 3px">
                {{ $t('error.404.heading') }}
              </h1>
            </v-card-title>

            <v-card-text
              class="text--primary font-weight-light"
              style="line-height: 140%; letter-spacing: 1px"
              >{{ $t('error.404.description') }}</v-card-text
            >
            <v-card-text>
              <v-btn :to="localePath('index')" color="primary" block x-large>
                {{ $t('layout.navigation.home') }}
              </v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-img>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: () => {},
    },
  },
  head() {
    return {
      title: this.$t('error.404.heading'),
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$t('error.404.description'),
        },
      ],
      link: [
        {
          rel: 'preload',
          as: 'image',
          href: `${this.$config.BASE_URL}${this.$img(this.src, {
            width: 1200,
            height: 630,
          })}`,
          imagesrcset: this._srcset.srcset,
          imagesizes: '100vw',
        },
      ],
    };
  },
  computed: {
    _srcset() {
      return this.$img.getSizes('/img/404.jpg', {
        sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
        modifiers: {
          format: 'webp',
          quality: 70,
        },
      });
    },
  },
};
</script>

[bpeab]

I have the same issue.

When I pass $prismic.asLink(slice.image) directly to the component prop (e.g. image="$prismic.asLink(slice.image)" and pass it to nuxt-picture via the src prop (:src="image") it works but if I pass an object instead, such as :

image="{
  url: $prismic.asLink(slice.image),
}"

And use it : :src="image.url" I get the following error: input must be a string (received string: "") but image.url does output the actual url of the image.

[ousmaneNdiaye]

Same problem for me, it worked removing nuxt-lazy-load

[realandrew]

I'm getting this error too with Nuxt3 and NuxtImage v1. I'm not using nuxt-lazy-load so it's not my problem. I did however workaround it by using <nuxt-img :src="String(img)" /> (constructing a string from the prop value).