Проблема с интерполяцией Vue /Javascript


Проблема с интерполяцией Vue /Javascript

04.11.2020 12:47:25 Просмотров 3 Источник

Я пытаюсь интерполировать значение photo в Vue. Вот эти компоненты:

Пояснение: Мы определяем набор данных как null. Затем мы выполняем метод post для внутренней базы данных, где мы получаем photo,email,name и id. Все работает нормально до значения photo. Как вы можете видеть, я выполнил метод среза на строке, который удалил ненужные данные. Результатом этого является только имя файла.

<script>

export default {
  data() {
    return {
      photo: null,
      email: null,
      name: null,
      id: null
    };
  },
 created() {
this.axios
      .post("http://127.0.0.1:8000/api/auth/me", "body", {
        headers: axiosHeader
      })
      .then(response => {
        console.log(response.data);
        this.name = response.data.name;
        this.email = response.data.email;
        this.id = response.data.id;
        this.photo = "@/photodatabase/" + response.data.photo.slice(37, 56);
        console.log(this.photo);
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

Значение, которое я получил, равно @/photodatabase/041120_09_24_03.jpg, когда я console.log(this.photo), что является правильным значением. Однако когда я пытаюсь интерполировать его как:

<img v-else-if="photo != null" :src="photo"
  height="200px" width="200px" />

Изображение не показывается. Когда я проверил элемент, вы могли видеть на теге img, что значение было @/photodatabase/041120_09_24_03.jpg, что было правильным значением.

Я попробовал интерполировать вот так:

<img v-else-if="photo != null" :src="`${photo}`"     
    height="200px" width="200px" />

и это все еще не работает. Однако, когда я не интерполировал значение photo, не использовал стенографию v-bind photo,email,name1 и просто скопировал и вставил значение photo в опору photo,email,name3, как это:

photo,email,name4

Тогда это работает. Чего мне здесь не хватает?

У вопроса есть решение - Посмотреть?

Ответы - Проблема с интерполяцией Vue /Javascript / Problem with Vue /Javascript interpolation

Abdelrhman  Gemi

04.11.2020 12:59:35

Поскольку динамическое изображение src должно photo быть абсолютным URL-адресом, например: http://127.0.0.1:8000/photodatabase/041120_09_24_03.jpg или

если на том же сервере

/photodatabase/041120_09_24_03.jpg

или вы можете легко отправить абсолютный URL-адрес в ответ.

Jan Madeyski

04.11.2020 01:07:46

Я считаю, что это не правильный URL @/photodatabase/041120_09_24_03.jpg

Вы написали "это все еще не работает", поэтому вы получаете ошибку "404 не найден"?

Эта ссылка должна вести к вашему бэкенду (статический актив или контроллер Laravel). @ переписывается Webpack во время компиляции на ваш общедоступный url - адрес-он не будет работать как динамический путь во время выполнения...

Настоящий кодекс

<img src="@/photodatabase/041120_09_24_03.jpg" />

...должно стать чем-то другим после компиляции. Осмотреть его. Это может быть что-то вроде этого:

<img src="/static/photodatabase/041120_09_24_03.jpg" />

Поэтому, если вы не сопоставили @ в vue-router, ни в Laravels routes, то вам следует изменить @ в этой ссылке. Вы можете попробовать просто /photodatabase/041120_09_24_03.jpg

Помочь в развитии проекта:
Закрыть X