Javascript Vue Axios:如何在ArrayList中获取链接
我需要获取图片的URL以显示我的img:src标记。我试着:Javascript Vue Axios:如何在ArrayList中获取链接,javascript,html,vue.js,axios,Javascript,Html,Vue.js,Axios,我需要获取图片的URL以显示我的img:src标记。我试着: <img class="card-img-top" :src="noticia.Fotos.Link" alt="Card image cap"> 您试图从数组(而不是ArrayList)中检索元素,这意味着您需要指定要在数组中检索的元素。在Javascript中,这是通过在数组名后的括号中指定元素的索引来实现的。如果需要第一个元素,可以执行noticia.Fotos[0].Link如果我尝试::src=“noticia
<img class="card-img-top" :src="noticia.Fotos.Link" alt="Card image cap">
您试图从数组(而不是ArrayList)中检索元素,这意味着您需要指定要在数组中检索的元素。在Javascript中,这是通过在数组名后的括号中指定元素的索引来实现的。如果需要第一个元素,可以执行
noticia.Fotos[0].Link
如果我尝试::src=“noticia.Fotos[1].Link”,我的控制台将返回以下内容:“TypeError:无法读取未定义的属性'Link'。为什么?在计算机科学中,数组大多从0开始,而不是从1开始。在您的列表中,位置0处有一张照片,但位置1处没有,这就是您出现此错误的原因
<div class="col-lg-4" v-for="noticia in noticias">
<div class="row">
<div class="card mt-3 col-lg-10 offset-lg-1">
<img class="card-img-top" :src="noticia.Fotos.Link" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{noticia.Titulo}}</h5>
<p class="card-text text-center">
{{noticia.Descricao}}
</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: '#noticia',
data: {
UnidadeId: "",
Identificador: "",
Tipo: "",
},
data() {
return {
noticias: [],
}
},
mounted() {
var self = this
axios.get('URL', {
params: this.axiosParams
})
.then(response => {
console.log(response);
self.noticias = response.data
})
.catch(error => {
console.log(error);
})
},
computed: {
axiosParams() {
const params = new URLSearchParams();
params.append('UnidadeId', '31');
params.append('Identificador', '0');
params.append('Tipo', '1');
return params;
}
},
})
</script>
[
{
"ItemId": 902,
"Titulo": "Noticia",
"Descricao": "Noticia",
"Data": "/Date(1590593442191)/",
"QtdeCurtidas": 0,
"QtdeComentarios": 0,
"Curtido": false,
"Observacao": null,
"Fotos": [
{
"FotoId": 1508,
"Link": "http://agro.aloapp.com.br/Imagens/cVV4S0dINGRESm9IN3IxM2swYXVjZz09/Item/bg_carousel_2.jpg"
}
],
"Videos": [],
"IsVideo": false
}
]