Ву.js-изменить неопределенный источник img, который я создал динамически
Я играю с 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]);
},
}
})У вопроса есть решение - Посмотреть?
Источник
@Kokodoko большое спасибо за вашу помощь. Вы имеете в виду, что операторы if/else должны быть чем-то вроде этого? средний != = """ > >средний " / > >< / div> < / div><div v-else> <div v-else>ПНГ"/> </div>
Источник
вы проверяете правильность путей
Источник
Пути верны, потому что я могу видеть изображение в скобках также, если я изменяю порядок, то же самое я могу видеть только 1-ю позицию в списке...
Источник
Что-то не так с операторами if / else, потому что когда я пытаюсь это <img v-bind:src= " getMissingImg (index)"/> я вижу каждый img, который у меня есть в моем массиве
Источник
Я только что нашел решение, массив отсутствующих фотографий должен быть одинаковой длины с отсутствующими фотографиями из decrArray: []. Большое спасибо @Boussadjra Brahim ваше объяснение ниже удивительно и важно, чтобы найти решение . Я желаю вам счастливого Нового года человек
Источник
это так хорошо, что вы поняли проблему, и вы можете
Источник
Ответы - Ву.js-изменить неопределенный источник img, который я создал динамически / Vue.js - change undefined img source that I have created dynamically
Является ответом!
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]);
}
Большое вам спасибо за помощь . В моем случае у меня есть несколько отсутствующих фотографий, которые я должен заменить, как я могу справиться с этой ситуацией? Могу ли я хранить их в массиве вместо localImg:?
да, вы могли бы сделать это с массивом
Я отредактировал свой исходный код. Я создал массив с url-адресом img, и я пытаюсь получить его в другом заявлении, все еще без удачи. Я вижу только вторую фотографию из своего списка
Я не могу отблагодарить вас достаточно ... Что такое требование? это массив?
я обновил свой ответ, добавив некоторые детали, и
require-это функция для загрузки внешних файлов, таких как изображения или файлы js
Может быть, это раздражает вас, но не могли бы вы снова написать мне синтаксис об массиве, используя require, потому что вы удалили свой последний комментарий, и мне не повезло с ним . изображения: ["missing_beers-logo/420%20fest.jpg", " missing_beers-логотип / 15%20aniversarry.png", " missing_beers-логотип / 15%20aniversarry.png", " missing_beers-логотип / 3%20Weight%20beer%20.формат PNG"],
это были
images: [require("missing_beers-logo/420%20fest.jpg"),require("missing_beers-log....но я рекомендую использовать метод, так как это не чистый код
Все еще не работает у меня есть изменить снова мой первоначальный код если вы можете взглянуть пожалуйста потому что я не могу понять где моя вина :( :(
используя метод, вы должны сохранить эти
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 (this.images[index]);}, но я вижу только вторую фотографию моего массива, я отредактирую свой исходный код, чтобы быть более ясным