skip to Main Content

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!!! 🙂

2

Answers


  1. Chosen as BEST ANSWER

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


  2. For nuxt 3 you need to put pictures in the public folder, for nuxt 2 in the static folder. Put the image in the appropriate folder, update the project build. Check that the image is available by direct link. For example, you run your site on localhost:3000, and the image is called img.png you need to check the url localhost:3000/img.png.

    If the image is available, then the :src="post.image" line is definitely the problem. Check via web tools which link is generated there.

    I can’t give a more precise answer, not everything is clear from the message.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search