Как динамически отобразить изображение в VueJS?

Question

Пожалуйста, посмотрите здесь отношения между компонентами Как передать значение от одного дочернего компонента другому в VueJS?

Ниже приведен фрагмент кода, не выдающий ошибку и не отображающий изображение

<img v-bind:src="image_url" /> 

Код:

<template>
  <div>
    <img v-bind:src="image_url" />
  </div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

image_url происходит из другого компонента, и в инструменте разработчика VueJS мне удалось подтвердить, что значение является URL-адресом. Похоже, что-то не так с тем, как я пытаюсь визуализировать динамическое c изображение.

Answer 1

Вы должны выставить свои изображения на ваш веб-сервер. Надеюсь, Vue -cli сделает это за вас. Вы должны переместить вашу папку ресурсов из sr c в папку publi c.

Дополнительная информация о https://cli.vuejs.org/guide/html-and-static-assets.html#static -assets-processing

Answer 2

Не забудьте добавить.

<div v-if="image_url">
  <img v-bind:src="image_url" />
</div>

Answer 3

Может сработать на вашем. Сделайте наблюдатель для этого, чтобы снова обновить значение реквизита и повторно отобразить его в вашем компоненте.

export default {
  props: ["image_url"],
  watch: {
          image_url(val){
              this.image_url = val
          },
    }

};