`src` doesn't work on Vuetify tags that use images

[garraflavatra]

Module version 1.11.0

Describe the bug The following code:

<v-img
  class="white--text align-end"
  height="200px"
  :src="require('~/assets/an_image.jpg')"
>

doesn't return an image, but it returns an error:

[Vue warn]: Invalid prop: type check failed for prop "src". Expected String, Object, got Module 

found in

---> <VImg>
       <VCard>
         <Anonymous>
           <Nuxt>
             <VContent>
               <VApp>
                 <Layouts/default.vue> at layouts/default.vue
                   <Root>

This also happens on this app bar:

<v-app-bar
  absolute
  dark
  shrink-on-scroll
  prominent
  :src="require('~/assets/the_same_file_as_avove.jpg')"
>

I've also tried src="~/assets/image.jpg, which didn't work, too.

Expected behavior I expected that the image renders correctly, but when I open the debug console, I see that the value of the image src tag not something like _/nuxt/img/g273g8h.jpg is, but ~/assets/image.jpg. My browser tried thus to render http://localhost:3000/~/assets/image.jpg, which — of course — didn't work and throws a 404 Not Found error.

Additional context My config file:

import colors from 'vuetify/es5/util/colors'

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#2196f3',
          secondary: '#607d8b',
          accent: '#00bcd4',
          error: '#f44336',
          warning: '#ff9800',
          info: '#3f51b5',
          success: '#8bc34a'
        }
      }
    }
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {}
  },
  router: {
    base: '/'
  }
}

The Question Am I missing webpack config? Or have I something misconfigured? Or ...? How do I solve this problem?

What I've Tried I've tried to extend the webpack configuration like this:

/* nuxt.config.js */

// other configuration, same like above

build: {
  extend (config, { isClient, loaders: { vue } }, ctx) {
    if (isClient) {
      vue.transformAssetUrls['v-app-bar'] = ['src'];
    }

    // other configuration
  }
  // other configuration
},

Didn't work, because I think this is executed after the page is renderd (i.e. after the Vuetify tags are converted to HTML tags)

My Assumption I think that the above code is the right code, but we have to execute it before the Vuetify tags are converted to HTML tags.

[DevTiqo]

Any solution to this yet? @garraflavatra

[garraflavatra]

@DevTiqo You could put your images into the public folder and just insert the absolute URL to them, but the whole idea why to use require instead a static URL for assets is asset footprinting, which is not applied when providing just a URL.

[garraflavatra]

And looking at the number of open issues, I don't think this will be resolved soon 😕

[larzon83]

I never had any problem/error with :src="require('~/assets/img/some-img,jpg')" with all my nuxt + Vuetify projects. Only difference I see to my Vuetify config: I use treeShake: true. Maybe try that. Update your dependencies and nuke your node_modules folder and do npm install.

[garraflavatra]

Thank you! I’ll try it tomorrow and close this issue if solved.

[VladBrok37]

@garraflavatra how it goes with the issue?

[garraflavatra]

Well, it's been 3 years since I encountered this issue, but honestly I haven't used this module ever since.

Does this problem still exist? (I don't think so, because the last commit is getting old too.)