CODEWITHSUNDEEP
laravelvue.jsvuejs3inertiajslaravel-jetstream
Ubaldo Villaba
Ubaldo Villaba

Reputation: 83

Cannot display image in Vue.js + Laravel + Inertia

I need help with displaying images within a Vue.js component in my project, which is integrated with Laravel and Inertia.

I have a component called "Index.vue" located at the route "http://127.0.0.1:8000/clases". This component displays each "clase" stored in my database. Each "clase" item contains a link that redirects to its respective "show" view, with URLs such as "http://127.0.0.1:8000/clases/5". Within the "show" component, I've included another component named "Anuncios.vue", where I'm attempting to display the image.

<script setup>
const props = defineProps({
    data: Object,
    clase_id: Number,
    errors: Object,
});

const isImage = (data) => {
    const name = data.nombre;

    return name.endsWith(".jpeg");
};

const imageUrl = (url) => {
    return url.replace("public/", "storage/");
};


</script>
<template>
<div v-for="materiale in data.materiales">
    <div v-if="isImage(material)">
        <img :src="imageUrl(materiale.url)" alt="" srcset="">
    </div>
</div>
</template>

However, when attempting to display the images, I encountered the following error in the browser console:

However, when attempting to display the images, I encountered the following error in the browser console:

GET http://127.0.0.1:8000/clases/storage/materiales/17128465062.jpeg [HTTP/1.1 404 Not Found 651ms]

It seems that a "clases/" prefix is added to the URL, which I cannot explain.The "materiale.url" contains a URL like "public/materiales/17128465061.docx". I replace "public/" with "storage/" to point to the correct "public/storage" link.

Could anyone explain why the "clases/" prefix is added to the URL and help me resolve this issue? Any assistance or suggestions would be greatly appreciated.

Upvotes: 1

Views: 1169

Answers (1)

grsm9
grsm9

Reputation: 35

    const imageUrl = (url) => {
    return url.replace("public/", "storage/");
};

just delete only "public/" in that const!

works?

Upvotes: 0

Related Questions