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
I researched a lot and discovered that it needs a @nuxt/content library installed, but it got a few version problems
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 calledimg.png
you need to check the urllocalhost: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.