How to display image from json DRF in vue?

Question

Vue.js

Can't display image from DRF api

I get array like this

{title: "Mediocrity from mage school 2", year: "2022-02-15", type: "Special", poster: " localhost:8000/media/anime_poster/ magi.jpg "}

<script>
import axios from 'axios'

export default {
  name: 'Index',
    data() {
    return {
      anime: [],
      };
    },
    mounted() {
    axios
      .get('http://localhost:8000/api/anime/all')
      .then(response => (this.anime = response.data));
  },
};
</script>

Вывожу данные циклом 

<div v-for="anim in anime">
    <p>{{ anim.title }}</p>
    <p>{{ anim.year }}</p>
    <p>{{ anim.type }}</p>  
    <img src={{ anime.poster }}>
 </div>

All data is displayed except for the image, if you click on the image link, then there will be Page not found (404)



What should I do to make this link have an image, or can it be solved in another way?

Answer 1

You don’t have media distribution set up, all the details are in the docs and you need to figure it out, because distribution for development and for sale happens differently https://docs.djangoproject.com/en/4.0/howto/static...