Axios 호출에서 Vuejs img 요소로 이미지를 표시하려면 어떻게 해야 합니까?효과가 있는 것을 본 적이 없다

Axios 호출에서 Vuejs img 요소로 이미지를 표시하려면 어떻게 해야 합니까?효과가 있는 것을 본 적이 없다

나는 이것을 하는 방법을 꽤 많이 봐왔다.원래 이미지를 저장하고 데이터베이스에서 뷰로 호출하려고 했는데 어디에 저장해야 할지, 정확한 호출 방법을 모르겠어요.:src="prizes.image_url")??

이미지가 클라이언트 측에 저장됩니다.

{
    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>

단답

모든 이미지 저장assets디렉토리(또는 서브 디렉토리)를 지정합니다.파일 이름만 JSON에 저장합니다.image_url: "c5Cor.png"다음과 같이 표시합니다.

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

기타 코멘트

웹 팩은 자산의 폴더를 번들하여 내용의 경로/파일 이름을 바꿉니다.그래서...require필요한 경우--바인src런타임에 올바른 경로를 가져옵니다.

클라이언트/서버라고 하면 프런트 엔드/백엔드를 의미합니다.프런트 엔드 리소스와 백엔드 리소스가 모두 서버에서 제공되기 때문에 이들 리소스는 다릅니다.예를 들어, "The image is stored client-side"라는 문장은 이미지를 저장한 경우를 제외하고localStorage,indexedDB등, 정확하지 않습니다.Vue에 이미지 저장assets디렉토리는 서버측 프런트 엔드입니다.데이터베이스는 서버 측 백엔드가 됩니다.

따라서 이미지 저장에 대해 질문할 의도가 없는 한localStorage「데이터베이스에 이미지를 보존할 것인가, 아니면 파일로 보존할 것인가」라고 하는 표현이 좋을지도 모릅니다.일반적인 웹 사이트에서는 이미지를 파일로 저장하고 파일 이름만 데이터베이스에 저장합니다.(원시 이미지의 바이너리 데이터를 데이터베이스(블롭)에 저장할 수 있으며, 이것이 언제가 좋은 아이디어인지에 대한 논란도 있지만 일반적인 웹사이트에서는 통계적으로 거의 없을 것입니다.)파일로 저장하는 것이 더 쉽습니다.

img를 쿼리하고 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))
  }

같은 방법으로 데이터베이스에 저장할 수 있습니다.response.data데이터베이스에도 있습니다.

언급URL : https://stackoverflow.com/questions/60420503/how-do-you-display-an-image-from-an-axios-call-into-a-vuejs-img-element-ive-se