[Vuejs]-Can't get image to load in Vue

I’m used to put all images into the public folder, so I don’t need webpack to load images.

The path of the image is ‘/public/assets/img/london.jpg’

So, in any Vue component I can render the image using

<div>
   <a href="#">
     <img src="/assets/img/london.jpg" alt="london"/>
   </a>
</div>

You can also directly require in your template.

<div>
    <a href="#">
        <img :src="require(`@/assets/img/london.jpg`)"/>
    </a>
</div>

Note that the @ is your src/ folder.

When binding properties, the model or data type must be correct.

To bind :src, it must be a string or data model.

<div> <a href=""><img :src="'london.jpg'"></a></div>

or

<div> <a href=""><img src="img"></a></div>

or

export default {
  data () {
    return {
      img: require('london.jpg')
    }
  }
}

<div> <a href=""><img :src="img"></a></div>