[Vuejs]-Nuxt, Strapi can't get media url

by

0👍

I don’t know how you upload your images in strapi, but below I describe my method for uploading images of book covers in my strapi local-host and the way I access the image in my nuxt app. Maybe it is helpful for you to use it in your app.

First I made a new media field in my strapi "content-types builder" section and named it "bookCover". after that I upload my image in database for each book.

Second I used fetch() instead of created hook in my Nuxt app. below is the code of my Nuxt page script:

data() {
  return {
    books: [],
  }
},

async fetch() {
  this.books = await this.$axios.$get('http://localhost:1337/books');
}

Finally according to Nuxt documentation I used this code in my template part of my page:

<div>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
<!-- you must enter your index of drinks, for example here I access the first book image -->
    <v-img max-width="250" :src="`http://localhost:1337${this.books[0].bookCover.url}`"></v-img>
  </div>
</div>

I think if you use this method and use "fetch" hook and also modify the way you call src attribute in "v-img", you can access your image. Also notice that my variable names are different from your names and you must change them.

Leave a comment