Render image data from directus

Question

[UPDATE: SOLVED]

I am new to directus, I have problem in rendering image data from directus cloud api to my vue project.

How can I render UUID directus image? This is the json image

and this is my vue app code

<script setup>
    import Button from './Button.vue'
    const { story } = defineProps(['story'])
    //console.log(story.img)
</script>

<template>
    <div class="card-wrapper shadow-lg shadow-slate-400  m-2 p-2 w-40 md:w-60 rounded-md flex flex-col justify-between">
        <div class="content text-white">
            <h2 class="text-2xl font-bold">{{ story.title }}</h2>
            <!-- <h4 class="headline1 text-md font-semibold">{{ story.headline }}</h4> -->
            <p>{{ story.article_body }}</p>
        </div>
        <div class="cat-ava flex justify-center items-center">
            <img :src="`//https://my.directus-api.app/assets/${story.img}`" :alt="`${story.title} image`">
        </div>
        <div class="btn-wrapper flex justify-center">
            <Button name="Read More..." />
        </div>
    </div>
</template>

this is the result:

result

the title and article body is working but not for the image.

this is what I expected:

expected result

UPDATE

this is how I solved:

the code from vue before:

<img :src="`//https://my.directus-api.app/assets/${story.img}`" :alt="`${story.title} image`">

this is after I fixed it:

<img :src="`https://my.directus-api.app/assets/${story.img}?some_random_token`" :alt="`${story.title} image`">

There might be a typo with your image url, why is the 2 `//` at t he begining ? Have you tried: ```:src="`https://my.directus-api.app/assets/${story.img}`"``` ? — Gregoire Ducharme, Feb 06 '23 at 15:14
@GregoireDucharme still didn't work. but when i console.log(story.img) it shows "GET my.directus-api.app/assets/UUID random string" and code 403 — kiroo, Feb 07 '23 at 02:00
http code 403 means `forbidden` so you might have an authorization issue here — Gregoire Ducharme, Feb 07 '23 at 15:16
@GregoireDucharme it's already solved bro thanks for commenting — kiroo, Feb 08 '23 at 06:23

Render image data from directus

this is the result:

this is what I expected:

the code from vue before:

this is after I fixed it:

0 Answers0