foto não é renderizada no formulário de 'ALTERAR' | Vue.js parte 2: construindo Single Page Applications

os dados são carregados normalmente na tela, mas a imagem-responsiva não exibe a foto:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade o console do navegador esta exibindo essa mensagem de erro:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Cadastro

<form @submit.prevent="grava()">
  <div class="controle">
    <label for="titulo">TÍTULO</label>
    <!-- toda vez que o atributo 'foto.titulo' mudar o input ira pegar essa alteração pelo v-bind
         :value="foto.titulo" -->
    <input type="titulo" autocomplete="off" v-model="foto.titulo" />
  </div>

  <div class="controle">
    <label for="url">URL</label>
    <input id="url" name="url" autocomplete="off" v-model.lazy="foto.url" />
    <imagem-responsiva :url="foto.url" :titulo="foto.titulo" />
  </div>

  <div class="controle">
    <label for="descricao">DESCRICAO</label>
    <textarea
      type="descricao"
      autocomplete="off"
      v-model="foto.descricao"
    ></textarea>
  </div>

  <div class="centralizado">
    <meu-botao rotulo="GRAVAR" tipo="submit" />
    <router-link :to="{ name: 'home' }">
      <meu-botao rotulo="VOLTAR" tipo="button"></meu-botao>
    </router-link>
  </div>
</form>

<script> //código omitido import ImagemResponsiva from "../shared/imagem-responsiva/ImagemResponsiva.vue"; export default { components: { imagem-responsiva: ImagemResponsiva, //código omitido }, } </script>

Cadastro

Mergulhe em programação