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">

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.

vuejs-templates/webpack#126

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

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 :)

@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)
}

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.

@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.

thx~

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

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

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

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

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

This @/ also works.

<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:

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

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

@proYang Please see the docs:

URLs prefixed with ~ are treated as a module request

@oswaldofreitas you are the man 👍

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

<img :src="image">

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

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

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

I forgot what package that is

thanks @oswaldomilet

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

worked for me. Very weird...

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