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

Question

我正在使用vue js和第三方API。我已经成功地获取了json数据并将其显示在我的html中，但我正在努力处理图像。json文件中缺少一些图像，因此我将它们本地存储在我的笔记本电脑中。

我尝试在我的html中使用v-if设置空图像源，但没有成功。(请参阅我的html文件中的注释)

此外，我还尝试为每个img分配一个类，然后尝试使用jquery $("#zTTWa2").attr("src", "missing_beers-logo/11.5%20plato.png");设置img源代码，但也没有成功。

我的错在哪里？也许我的方法是完全错误的，因为我在编码方面是新手，任何建议都将不胜感激。提前谢谢你

​

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