Directus Cloud API图片渲染故障：Vue项目UUID图片无法显示的解决方案

问题描述 #

我是Directus新手，在Vue项目中调用Directus Cloud API渲染图片数据时遇到问题：无法渲染UUID格式的图片。标题和文章内容能正常显示，但图片始终加载失败。

原Vue项目代码 #

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

解决方案 #

修改前的图片渲染代码： #

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

修改后的图片渲染代码： #

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

内容的提问来源于stack exchange，提问作者kiroo