Не удается получить изображение для загрузки в Vue

Question

Невозможно получить простой файл изображения для загрузки с использованием Vue (с использованием однофайлового компонента с расширением .vue).Вот код, который я вставил в шаблон:

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

Что я делаю не так?

Answer 1

Я привык помещать все изображения в общую папку, поэтому мне не нужен веб-пакет для загрузки изображений.

Путь к изображению '/public/assets/img/london.jpg'

Итак, в любом компоненте Vue я могу визуализировать изображение, используя

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

Answer 2

Вы также можете напрямую указать в своем шаблоне.

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

Обратите внимание, что @ - это ваша папка src /.

Answer 3

При привязке свойств модель или тип данных должны быть правильными.

Для привязки: src, это должна быть строка или модель данных.

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

или

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

или

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

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