Ву.js-изменить неопределенный источник img, который я создал динамически

Ву.js-изменить неопределенный источник img, который я создал динамически

30.12.2018 05:48:49 Просмотров 34 Источник

Я играю с vue js и с сторонним API. Мне удалось извлечь json, поэтому я сохранил их локально в своем ноутбуке.

Я попытался установить пустой Источник изображений с помощью v-if в моем html без удачи. (см. комментарии в моем html-файле)

Также я попытался назначить класс для каждого json, а затем попытался установить источник imgс помощью jquery imgтоже без удачи.

Где же моя вина? Возможно, мой подход совершенно неправильный, потому что я новичок в кодировании, и любое предложение будет оценено. Заранее спасибо

$("#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]);
  },





  }
})

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94794821_53978593
@Kokodoko большое спасибо за вашу помощь. Вы имеете в виду, что операторы if/else должны быть чем-то вроде этого? средний != = """ > >средний " / > >< / div> < / div><div v-else> <div v-else>ПНГ"/> </div>
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94796093_53978593
вы проверяете правильность путей
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94796110_53978593
Пути верны, потому что я могу видеть изображение в скобках также, если я изменяю порядок, то же самое я могу видеть только 1-ю позицию в списке...
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94797123_53978593
Что-то не так с операторами if / else, потому что когда я пытаюсь это <img v-bind:src= " getMissingImg (index)"/> я вижу каждый img, который у меня есть в моем массиве
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94797376_53978593
Я только что нашел решение, массив отсутствующих фотографий должен быть одинаковой длины с отсутствующими фотографиями из decrArray: []. Большое спасибо @Boussadjra Brahim ваше объяснение ниже удивительно и важно, чтобы найти решение . Я желаю вам счастливого Нового года человек
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically#comment94798004_53978593
это так хорошо, что вы поняли проблему, и вы можете

Ответы - Ву.js-изменить неопределенный источник img, который я создал динамически / Vue.js - change undefined img source that I have created dynamically

Является ответом!
Boussadjra Brahim

30.12.2018 06:20:08

Использование 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]);
      }
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795049_53978819
Большое вам спасибо за помощь . В моем случае у меня есть несколько отсутствующих фотографий, которые я должен заменить, как я могу справиться с этой ситуацией? Могу ли я хранить их в массиве вместо localImg:?
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795114_53978819
да, вы могли бы сделать это с массивом
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795316_53978819
Я отредактировал свой исходный код. Я создал массив с url-адресом img, и я пытаюсь получить его в другом заявлении, все еще без удачи. Я вижу только вторую фотографию из своего списка
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795421_53978819
Я не могу отблагодарить вас достаточно ... Что такое требование? это массив?
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795480_53978819
я обновил свой ответ, добавив некоторые детали, и require-это функция для загрузки внешних файлов, таких как изображения или файлы js
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795660_53978819
Может быть, это раздражает вас, но не могли бы вы снова написать мне синтаксис об массиве, используя require, потому что вы удалили свой последний комментарий, и мне не повезло с ним . изображения: ["missing_beers-logo/420%20fest.jpg", " missing_beers-логотип / 15%20aniversarry.png", " missing_beers-логотип / 15%20aniversarry.png", " missing_beers-логотип / 3%20Weight%20beer%20.формат PNG"],
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795745_53978819
это были images: [require("missing_beers-logo/420%20fest.jpg"),require("missi‌​ng_beers-log....но я рекомендую использовать метод, так как это не чистый код
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795854_53978819
Все еще не работает у меня есть изменить снова мой первоначальный код если вы можете взглянуть пожалуйста потому что я не могу понять где моя вина :( :(
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94795970_53978819
используя метод, вы должны сохранить эти images: ["missing_beers-logo/420%20fest.jpg","missing_beers-logo/15t‌​h%20aniversarry.png"‌​,"missing_beers-logo‌​/15th%20aniversarry.‌​png","missing_beers-‌​logo/3%20Weight%20be‌​er%20.png"]в ваших данных
https://stackoverflow.com/questions/53978593/vue-js-change-undefined-img-source-that-i-have-created-dynamically/53978819#comment94796024_53978819
У меня есть создать массив, как это точно у меня есть сохранить метод getMissingImg (index){ return (this.images[index]);}, но я вижу только вторую фотографию моего массива, я отредактирую свой исходный код, чтобы быть более ясным