Need help with ImageKit

[runic blaze]

hi guys i need help below is the code where i wanted to pull images from imagekit

             <NuxtImg  class=""    :src="imageSource.url"   draggable="false" loading="lazy" decoding="async" />
 </div>
<script setup>
    const imageSources = ref([]);
    const fetchImages = async () => {
        try {
            const response = await fetch("urlEndpoint");
            if (response.ok) {
            const data = await response.json();
            // Assuming your response contains image data in an array
            imageSources.value = data;
            } else {
            console.error("Error fetching images:", response.status, response.statusText);
            }
        } catch (error) {
            console.error("Error fetching images:", error);
        }
    };
</script>```
i am getting error 404 i am trying to populate the imagesources with the imagekit images but ran into the error.

[hearty falcon]

Could you maybe refactor to

const {data: imageSources, error} = useAsyncData("<key>", async () => {
     try {
            const response = await fetch("urlEndpoint");
            if (response.ok) {
            const data = await response.json();
            // Assuming your response contains image data in an array
            imageSources.value = data;
            } else {
            console.error("Error fetching images:", response.status, response.statusText);
            }
        } catch (error) {
            console.error("Error fetching images:", error);
        }
}) 

if(error.value) {console.error(error)}

return {
  imageSources
} ```