Vue.js - 동적으로 생성한 정의되지 않은 img 소스 변경

Vue.js - 동적으로 생성한 정의되지 않은 img 소스 변경

vue js와 서드파티 API를 가지고 놀고 있습니다.나는 성공적으로 를 취득했다.jsonhtml에 데이터를 표시하지만 이미지 처리에 어려움을 겪고 있습니다.에서 일부 이미지가 누락되었습니다.json파일을 만들어서 노트북에 로컬로 저장해놨어요.

html에서 v-if를 사용하여 빈 이미지 소스를 설정하려고 했지만 실패하였습니다.(html 파일의 코멘트를 참조해 주세요.

또한 나는 모든 수업의 배정을 시도했다.img그리고 나서 나는 세팅하려고 했다.imgjquery를 사용한 소스$("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png");운도 없고요.

내 잘못은 어디에 있지?코딩에 익숙하지 않기 때문에 제 접근 방식이 완전히 잘못된 것일 수도 있고, 어떤 제안이라도 해주시면 감사하겠습니다.잘 부탁드립니다.

var app = new Vue({
  el: "#app",
  data: {

    beers: [],
    decrArray: [], //array with img links
    cleanedArray: [], //without undefined
    path: 0,
    images: [missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
    "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png",
	"missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png", "missing_beers-logo/11.5%20plato.png"],
  created: function() {
    this.getData();
  },

  methods: {
    getData: function() {
      var fetchConfig =
        fetch("http://api.brewerydb.com/v2/beers?key=6a3ac324d48edac474417bab5926b70b&format=json", {
          method: "GET",
          dataType: 'jsonp',
          //                     responseType:'application/json',
          // "Content-Type": 'application/json',


          headers: new Headers({
            "X-API-Key": '6a3ac324d48edac474417bab5926b70b',
            'Content-Type': 'application/json',
            "Access-Control-Allow-Credentials": true,
            "Access-Control-Allow-Origin": '*',
            "Access-Control-Allow-Methods": 'GET',
            "Access-Control-Allow-Headers": 'application/json',



          })
        }).then(function(response) {
          if (response.ok) {
            return response.json();
          }
        }).then(function(json) {
          console.log("My json", json)
          //                    console.log("hi");
          app.beers = json.data;
          console.log(app.beers);
          app.pushDescr();
          console.log(app.decrArray);
          app.removeUndef();
          //					console.log(app.cleanedArray);
        })
        .catch(function(error) {
          console.log(error);
        })
    },

    pushDescr: function() {
      console.log("hi");
      for (var i = 0; i < app.beers.length; i++) {
        app.decrArray.push(app.beers[i].labels);
      }


      return app.decrArray;
    },

    removeUndef: function() {
      for (var i = 0; i < app.decrArray.length; i++) {
        if (app.decrArray[i] === undefined) {
          app.decrArray[i] = "";
        }
      }
      console.log(app.decrArray);
    },
     getMissingImg(index){

   return(this.images[index]);
  },





  }
})

  <div class="app">
    <div v-for="(value, index) in beers">
      {{value.name}}
      <!--
            	      
   <img  v-bind:src="decrArray[index].medium" :class="value.id"/>        	         	
-->
      <div v-if="decrArray[index].medium !==undefined  ">
        <img :src="decrArray[index].medium" />
      </div>
      <div v-else>
        <img :src="getMissingImg(index)" />
      </div>

    </div>



  </div>

웹 팩 로컬이미지의 사용은 모듈과 같이 간주되므로 다음과 같이 요구 또는 Import해야 합니다.

 <img :src="localImg" />

데이터 오브젝트에는 다음과 같은 것이 필요합니다.

 data(){
       return{
          localImg:require("missing_beers-logo/11.5%20plato.png"),
          ...
          }
       }

또는

import img from "missing_beers-logo/11.5%20plato.png"
 export default{

  data(){
       return{
          localImg:img,
          ...
          }
       }

이미지 배열이 있는 경우 다음과 같은 방법을 사용할 것을 권장합니다.

  <div v-else>
    <img :src="getMissingImg(index)" />
  </div>

데이터:

images: ["missing_beers-logo/420%20fest.jpg","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/15th%20aniversarry.png","missing_beers-logo/3%20Weight%20beer%20.png"] 

방법은 다음과 같습니다.

   getMissingImg(index){

       return require(this.images[index]);
      }

언급URL : https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically