CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2axios
user12913705
user12913705

Reputation:

How do you display an image from an axios call into a Vuejs img element? I've seen nothing that works

I've seen quite a few ways of doing this. I wanted originally to store the image and call it from my database to the view, but I'm not sure where I should store it and the correct way to call it (:src="prizes.image_url")??

The image is stored client-side

{
    id: 2,
    name: "Merano MC400 Cello",
    description: "Established in 2000, Merano have made it their mission to create affordable, beautifully crafted instruments. They offer brass, wind and stringed instruments all at reasonable prices. They have a large team of artisans who look over every instrument to ensure it maintains high standards. Many of their instruments are aimed at the beginner market but they also offer some fine examples of professional equipment as well.",
    image_url: "../assets/images/c5Cor.png",
    quantity: 3
}

getPrizes() {
  axios.get('http://localhost:3000/prizes').then(response => {
    this.prizes = response.data
    console.log(response.data)
  })
}

<div v-for="prize in prizes" :key="prize.id">
   <div class="card_individual">
      <div class="card-media-container">
         <img class="card_image" :src="prize.image_url" alt="instruments"/>
      </div>
      <div class="card-detail-container">
         <div class="card_title">Win a {{ prize.name }}</div>
      </div>
      <div class="modal-footer">
         <router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
      </div>
   </div>
</div>

Upvotes: 3

Views: 4333

Answers (2)

Dan
Dan

Reputation: 63139

Short answer

Put all of your images in the assets directory (or a subdirectory). Store just the filename in your JSON like image_url: "c5Cor.png" and show it like:

<img :src="require('@/assets/' + prize.image_url)" />

Other comments

Webpack bundles the assets folder, which renames the paths/filenames of the contents. So that's why require is needed-- when binding src to a variable-- to get the correct path at runtime.

When you say client/server, you may mean frontend/backend. Those are different because both frontend and backend resources are served from the server. For example, this statement, "The image is stored client-side": unless you've stored the image in localStorage, indexedDB, etc, is inaccurate. Storing the images in Vue's assets directory is server-side frontend. The database would be server-side backend.

So unless you intended to ask about storing images in localStorage, better phrasing might be, "Should I store images in the database or as files?". On a typical website, you would store the images as files, and store just the filenames in your database. (It is possible to store raw images' binary data in the database-- a blob-- and there's some debate about when this is a good idea, but it's probably statistically rare in typical websites.) It's easier to store them as files.

Upvotes: 1

juanesarango
juanesarango

Reputation: 569

Query the img and assign it as blob:

<img class="card_image" :src="getImageBlob(prize.image_url)" alt="instruments"/>

  <div v-for="prize in prizes" :key="prize.id">
    <div class="card_individual">
      <div class="card-media-container">
        <img class="card_image" :src="getImageBlob(prize.image_url)" alt="instruments"/></div>
      <div class="card-detail-container">
        <div class="card_title">Win a {{ prize.name }}</div>
      </div>
      <div class="modal-footer">
        <router-link :to="{ name: 'PriceDetail', params: { prizeId: prize.id }}"><button type="button" class="btn btn-primary">{{ cards.btn_text }}</button></router-link>
      </div>
    </div>
  </div>

  getPrizes () {
    axios.get('http://localhost:3000/prizes')
      .then(response => (this.prizes = response.data)
  },
  getImageBlob (image_url) {
    return axios.get(image_url).then(response => window.URL.createObjectURL(response.data))
  }

The same way if you want to store it in your database you can store the response.data in your database too.

Upvotes: 0

Related Questions