Почему Vue не может разрешить изображение с локального хоста?

Question

В качестве бэк-энда для vue. js Я использую laravel (порт 8000)

В моем БД у меня есть пользователь и имя его фото профиля (this.user.photo) .

Итак, я хочу показать эту фотографию.

<img :src="require(`http://localhost:8000/images/${this.user.photo}`)" alt="Profile Photo">

Когда я go до http://localhost: 8000 / images / 1.png Я на самом деле см. изображение, но Vue говорит:

Модуль не найден: Ошибка: не удается разрешить 'http://localhost: 8000 '

PS: console.log(this.user.photo) выходы 1.png

UPD: я видел много решений, таких как это или это , но они не работают

Answer 1

Напишите функцию для возврата URL изображения

var app = new Vue({
  el: '#app',
 methods: {
    getPicture() {
      return 'https://vuejs.org/images/logo.png'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img :src="getPicture()" alt="Profile Photo">
</div>

Answer 2

Похоже, ваши изображения уже размещены на сервере, и вы не связываете их во время сборки. В этом случае вам не нужно использовать require и напрямую ссылаться на ваши изображения в шаблоне как

<img :src="'http://localhost:8000/images/' + user.photo" alt="Profile Photo">

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

Короче говоря, используйте require, когда у вас есть ресурсы c внутри вашего Vue модуля проекта

Answer 3

Вы можете вызвать изображение напрямую с помощью пути, если изображение не находится в общедоступном c пути

 <img :src=`../../images/${user.photo}` alt="Profile Photo">

Это создаст изображение в пути, где компиляция JS и изображения публикуются c путь будет добавлен автоматически.

Если вы пытаетесь добавить изображение из publi c path, вы можете инициализировать исходный путь в разделе data и вызвать изображение следующим образом

data:()=>{
  return {
    path: document.location.origin
  }
}

<img :src=`${path}/images/${user.photo}` alt="Profile Photo">

Примечание: вам не нужно использовать this в разделе шаблона.

Answer 4

Вы должны использовать require и указать на изображение.

Убедитесь, что путь указан относительно модуля, который его использует.