Vue.js-更改我动态创建的未定义img源

Question

我正在玩vue js和第三方API。我已经成功获取了json数据并将其呈现在html中，但是我在图像上苦苦挣扎。json文件中缺少某些图像，因此我将其本地存储在笔记本电脑中。

我试图在我的html中使用v-if设置空图像源，但没有运气。（请参阅我的html文件中的注释）

另外，我尝试为每个类分配一个类img，然后尝试img使用jquery 设置源，$("#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>

Answer 1

使用 webpack 本地图像被视为模块，因此您应该需要或导入它们，如下所示：

 <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]);
      }