vue3 dynamic img missing on build (internal img fed throught internal .json)

I build myself a website with a vue3 project, I'm using a lots of components to be re-used by other pages so a lot of the content of these components is being fed throught a internal .json file inside my project. I've looked for a solution but sadly cant find anything thats suited for my project.
Having a lot of img i cannot afford to individually import them. My previous solution was to manually put them in the dist folder after the build and modify my path in my .json to fit correctly but i've switch from manual build (npm run build) to a workflow to better work with my hosting solution (Github Pages). And it seems that with that i cant access the build folder to manually put my img with that.

I'll provide the related script under here to help understand the situation :

• first script (PageAccueil.vue)

<script setup>
    import AccueilSite from '@/components/AccueilSite/AccueilSite.vue'
</script>
<template> 
    <div class="accueil">
        <AccueilSite />
    </div>
</template>

• second script (AccueilSite.vue)

<script setup>
    import VignetteCategorie from '@/components/AccueilSite/VignetteCategorie.vue'
    import categorieData from '@/assets/json/categories.json'
</script>
<template>
    <div class="accueil-site">
        <div class="accueil-top">
            <div class="wrapImg">
                <img src="@/assets/img/jpg/lacSup/69-71/69-71_00.jpg" alt="lac-sup-principal">
            </div>
            <div class="wrapInfo">
                <div class="info-container">
                    <h1>Pemana Inc.</h1>
                    <h3>Location de quai et de logement</h3>
                    <div class="wrapImg">
                        <img src="@/assets/img/svg/logo_pemana_light.svg" alt="logo-light-full">
                    </div>
                </div>
            </div>
        </div>
        <div class="listeVignetteCat" v-if="categorieData">
            <h2>Explorer nos locations</h2>
            <VignetteCategorie v-for="categorie in categorieData" :key="categorie.id"
                :objCat="categorie" 
            />
        </div>
    </div>
</template>

• third script (VignetteCategorie.vue)

<script setup>
    const props = defineProps({
        objCat : null
    })
</script>
<template>
    <RouterLink class="vignetteCategorie" :to="props.objCat.link">
        <div class="wrapImg">
            <img v-if="props.objCat.img" :src="props.objCat.img" :alt="props.objCat.name">
            <img v-else src="@/assets/img/png/no-img.png" :alt="props.objCat.name">
        </div>
        <div class="wrapInfo">
            <span class="material-symbols-outlined" v-text="props.objCat.icon"></span>
            <p v-text="props.objCat.name"></p>
        </div>
    </RouterLink>
</template>

• finally, the .json concerned (categorie.json)

[
  {
    "id": 0,
    "name": "Quai Marina Zool",
    "icon": "anchor",
    "link": "/marina",
    "img": "/assets/marina_3d_1000x.jpg"
  },
  {
    "id": 1,
    "name": "Logement Lac-Supérieur",
    "icon": "home",
    "link": "/lac-superieur",
    "img": "/assets/69-71_00.jpg"
  },
  {
    "id": 2,
    "name": "Logement Saint-Jérôme",
    "icon": "home",
    "link": "/saint-jerome",
    "img": "/assets/1003_00.jpg"
  },
  {
    "id": 3,
    "name": "Projet à venir",
    "icon": "map",
    "link": "/a-venir",
    "img": "/assets/proj_a_venir.png"
  }
]

So in the second script, upon building, i have no problem at all with the image because i am "directly" calling to them (script → img)
However, in the third script (VignetteCategorie.vue), the img link works locally (npm run dev) //with corrected path .json, but when i build it the concerned img get ignore since they arent directly calling to them (script → .json → img)
I am looking for a solution that could help me get these img in my build, as i said, i cant afford to manually import them individually in my script since im dealing with a lot of img with multiple .vue components.

Please help

In case more research into my code are needed, here's the link to my github repo : https://github.com/Kebrouh/pemana

hemm, this is my first time using this, evrything is described in the previous case

When you build the Rollup changes your assets URLs:

/assets/marina_3d_1000x.jpg => dist/assets/marina_3d_100x-234d5f.jpg

When you use them directly when importing or in templates that conversion is done automatically in the source to match with URLs in the bundle.

But when you try to use file paths from a json, no conversion happen and actually Rollup does know nothing about your images at all. So basically nothing happens...

To include the json images in the build you should import them. In your case the image names are pretty random. But let's assume they are in the ./assets/json folder.

So first you import all images as URLs which will be used in the bundle. This way Rollup will pack all images in the bundle. You get an object map with keys as your local paths and values as paths that will be used in the bundle. Then replace your local paths with paths in the bundle:

https://vitejs.dev/guide/features.html#glob-import

import categorieData from '@/assets/json/categories.json'

const imagePaths = import.meta.glob('./assets/json/**/*.png', {eager: true, as: 'url'}); // subfolders also

for(const category of categoryData){
  category.img = imagePaths['.' + category.img];
}

Debug and tweak to make it actually work. There could be some paths transforms needed.