hi everyone i am unable to show image in frontend nuxt
can anyone pls help me out from this
here is my query code
export const allArticlesQuery = gql`
query allArticlesQuery {
articles {
data {
id
attributes {
title
date
description
slug
body
image {
data {
attributes {
url
}
}
}
}
}
}
}
`;
here is my index code
<div class="">
<div>
<div v-for="article in articles.data" v-bind:key="article.id">
<div>
<NuxtLink
:to="{ path: article.attributes.slug, query: { id: article.id } }"
>
<h3>
{{ article.attributes.title }}
<span>{{ article.attributes.date }}</span>
</h3>
</NuxtLink>
<p>{{ article.attributes.description }}</p>
<img :src="article.attributes.image.data.attributes.url" />
</div>
</div>
</div>
</div>
