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

Объяснение: мы определяем набор данных как нулевой. Затем мы выполняем метод отправки в серверную базу данных, где получаем 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, когда I 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 в src опора вот так:

<img
          v-else-if="photo != null"
          src="@/photodatabase/041120_09_24_03.jpg"
          height="200px"
          width="200px"
        />

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

0
Pacholoamit 4 Ноя 2020 в 12:47

3 ответа

Лучший ответ

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

Вы написали «это все еще не работает» , поэтому вы получаете ошибку «404 Not found» ?

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

Этот код

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

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

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

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

0
Jan Madeyski 4 Ноя 2020 в 10:07

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

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

/photodatabase/041120_09_24_03.jpg

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

1
Abdelrhman Gemi 4 Ноя 2020 в 09:59

Попробуйте использовать обработчик require

<img v-else-if="photo != null" :src="require(${photo})"     
    height="200px" width="200px" />
1
Amaarshall Yaswankar 7 Ноя 2020 в 14:42