How to use search params to generate an OG Image?

[ekkaiasmith]

I want to use the URL search params to dynamically add an image to my OG Image but it seems the HTML is evaluated before the computed property queryLoadout. Thus, queryLoadout.v returns undefined. How I am suppose to handle this?

<template>
    <NuxtImg
        provider="imagekit"
        :src="`/perks/${queryLoadout?.v?.replaceAll(' ', '_')}.jpg`"
        :height="100"
        :width="70"
        quality="75"
        fit="cover"
        format="avif,webp"
        placeholder
    />
</template>

<script setup lang="ts">
import type { Loadout, QueryLoadout } from "../../services/gunsmith.enum";

interface Props {
    route: string;
}

const props = defineProps<Props>();

const queryLoadout = computed(() => {
    const url = new URL(`https://my-url.com${props.route}`);
    let queryLoadout = {} as QueryLoadout;
    for (const [key, value] of url.searchParams) {
        Object.assign(queryLoadout, { [key]: decodeURIComponent(value) });
    }
    console.log(queryLoadout);
    return queryLoadout;
});
</script>