Ву.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]);
},
}
})







Ответы - Ву.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]);
}





require
-это функция для загрузки внешних файлов, таких как изображения или файлы js


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"]
в ваших данных
