jsontypescriptnuxt.js

Getting images from a Json on NuxtJs


So, to simplify my problem, i want to make a personal blog site with nuxtjs, i want to get the postPreview.js to show on the main screen. postPreview.js


export default [
    {
        "id": "0",
        "title": "DEV LOG #0",
        "image": "/download.jpeg",
        "excerpt": "puta que pariu conseguiu"
    }
];

the id, title and excerpt are fetched correctly except the image.

My blogPost.vue

<template>
  <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <div v-for="post in posts" :key="post.id" class="bg-white shadow-lg rounded-lg overflow-hidden">
        <NuxtLink :to="`/blogPage/${post.id}`" class="block hover:opacity-90">
          <NuxtImg  :src="post.image"/>
          <div class="p-4">
            <h2 class="text-xl font-semibold mb-2">{{ post.title }}</h2>
            <p class="text-gray-600 mb-4">{{ post.excerpt }}</p>
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import dataPreview from '../static/postPreviewData/postPreview'
  
interface Post {
  id: number;
  title: string;
  excerpt: string;
  image: string;
}

const posts = ref<Post[]>([]);

onMounted(() => {
  console.log('postData:', dataPreview);
  posts.value = dataPreview;
});


</script>


<style>

</style>

i have a [id].vue without any code

i tried creating a /static/ folder with chatgpt, but didnt work, only the postPreview.js was fetched correctly. the path to the images are /static/download.jpeg

i tried moving the images to /static, /public and /assets

this is the most recent code that i used with chatgpt and other AI to resolve this problem if you want more informations about the project feel free to ask!!! :)


Solution

  • I researched a lot and discovered that it needs a @nuxt/content library installed, but it got a few version problems