Vue-loader: html image src require not respecting webpack aliases?

[alexbakerdev]

Hey there,
I'm new to vue (which I love so far), just setting up an example project.
Hoping someone can tell me where I'm going wrong with aliasing requires.

Using the vue-cli webpack template for example, changing App.vue template to

<template>
  <div id="app">
    <img class="logo" src="assets/logo.png">


...

<script>
  import Hello from 'components/Hello'

and webpack.base.conf.js

  alias: {
    'src': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets'),
    'components': path.resolve(__dirname, '../src/components')
  }

Then moving App.vue into the folder src/App/ as index.vue webpack.
npm run build
gives:

ERROR in ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App/index.vue
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets/logo.png in /Users/Alex/Work/testing/quick/src/App
 @ ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App/index.vue 1:55-83

Not sure what is going on here the image seems to be taken care of by url-loader as its encoded into the js. Which I think differentiates it from this issue https://github.com/vuejs/vue-loader/issues/172 which Evan already replied to.

[yyx990803]

vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~:

<img class="logo" src="~assets/logo.png">

[k1sul1]

Not directly related, but if you're using the vue-cli webpack boilerplate and webpack is giving you pain when trying to bind images from the default data object (or whatever this is called, my first Vue project)..:

export default {
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
      img: '../assets/image.png'
    };
  },
};

<img :src="img"> will result in you scratching your head and wondering what you did wrong. Webpack "has no means of rewriting it" and it doesn't work. Wrap it in require() and if Airbnb ESLint gives you trouble, turn global-require to 0 in .eslintrc.js.

https://github.com/vuejs-templates/webpack/issues/126

[PrimozRome]

@k1sul1 I tried this solution but I am getting error Uncaught Error: Cannot find module '../assets/img/profiles/6.jpg'. Any idea?

[k1sul1]

Well, if you actually read the error message, you might actually figure it out :)

It clearly says "Cannot find module", so your path is probably broken. Meaning the file doesn't exist in that location :)

[PrimozRome]

@k1sul1 ok please don't think I am posting this before checking something like that... Ofcourse it exists... For example this is working:

<img src="../assets/img/profiles/6.jpg">

while this is not with the error I posted above

<img :src="loadImg('../assets/img/profiles/6.jpg')">

loadImg: function (path) {
   require(path)
}

[k1sul1]

Interesting. Can't say I have any ideas other than adding return to the function, but I'm assuming you have that in your actual code. I'm not an expert in any of these things so I can't really help you.

Could be a platform issue, are you using Windows perhaps?

For me, require just worked straight away.

[PrimozRome]

@k1sul1 tried that too when I noticed I don't have one, but without any luck. We are discussing this on the Vue.js forum as well but no success right now http://forum.vuejs.org/topic/5343/webpack-serve-dynamic-images/15.

[ghost]

thx~

[oswaldofreitas]

this code...

<template lang="pug">
  section
    img(src='~assets/logo.png')
</template>

is returning:

This dependency was not found:

• assets/logo.png in ./~ /vue-loader/lib/template-compiler?{"id":"data-v-29b5cd26"}!./~ /v
  ue-loader/lib/template-compiler/preprocessor.js?raw&engine=pug!./~/vue-loader/lib/select
  or.js?type=template&index=0!./src/components/layout/Navbar.vue

[oswaldofreitas]

no more, changed to img.logo(src='~@/assets/logo.png') and worked

[codeofsumit]

thanks @oswaldomilet

<img src="~@/assets/logo.png" />

worked for me. Very weird...

[imsunf]

my solution!

1.<img :src="icon_src" />
2.import the image at the top level
import icon from 'icon.png';

1. data () { return { icon_src:icon } }
   or computed instead

[tangdaohai]

I have another a way:

<img :src="require('@/assets/logo.png')" />

[jofftiquez]

Not all heroes wear capes. Thanks @oswaldofreitas The future generations will remember you.

[oswaldofreitas]

hahaha, funny. Thanks @jofftiquez

[paladin2005]

In my case it works with url('~@/assets/.......png')

[jofftiquez]

@paladin2005 you mean it WORKS or DOES NOT?

[paladin2005]

@jofftiquez I already edited y last comment. Sorry my english.

[AburronKing]

In _data(){return{require()}}_,how to writh this path

[AburronKing]

write this

[AburronKing]

Or in css url(~) ?

[jofftiquez]

<template>
<div>
    <img :src="logo">
</div>
</template>

<script>
import image from '@/assets/logo.png';

export default {
    data() {
        logo: image;
    }
}
</script>

This @/ also works.

[bcowell]

<template>
  <div>
    <md-boards>
      <md-board v-for="image in images" :key="image.header">
         <img :src="image.src">{{ image.header }}</img>
      </md-board>
    </md-boards>
  </div>
</template>

<script>
import image from '@/assets/img1.jpg'
export default {
  name: 'Banner',
  data: function () {
    return {
      images: [
        { src: image, header: 'img1' },
        { src: image, header: 'img2' },
        { src: image, header: 'img3' }
      ]
    }
  }
}
</script>

@jofftiquez weird, I'm trying the same thing and getting an error.

ERROR Failed to compile with 1 errors
This dependency was not found:

[proYang]

<img class="logo" src="~assets/logo.png">

why use "~", it will work. I want to kown the reason

[oswaldofreitas]

@proYang Please see the docs:

URLs prefixed with ~ are treated as a module request

[helmerdavila]

@oswaldofreitas you are the man 👍

[Sangeethks]

If you are using data property to assign image to src, then use require(). Like,

<img :src="image">

data() { return { image: require('@/assets/icons/profile.png') } }

[jofftiquez]

Another solution that I am using is <img :src="require('image/path/here')">

[motivis]

does anyone know how to npm install the package in order to use REQUIRE in the client application ?

I forgot what package that is

[brianwachira]

thanks @oswaldomilet

<img src="~@/assets/logo.png" />

worked for me. Very weird...

worked for me too.
src="~@/assets/image.png"