Javascript Vue Axios:如何在ArrayList中获取链接

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

我需要获取图片的URL以显示我的img:src标记。我试着:

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