Hi everyone,
So I worked hard on my portfolio today, which is basically almost all images.
It is build with Vite and Vue 3.
I have made some components so I can do a loop through all the images and send the image paths to the components. When I run locally and “netlify dev”, all the images show up.
But when I run “netlify deploy”, they don’t show up.
My images are all in:
src/assets/img
And in my code I use:
/src/assets/img/guitar.svg
/src/assets/img/cheese.svg
Etc.
My code looks like this:
<template>
<Item
v-for="(bgImage, index) in items"
:key="index"
:image="bgImage.image"
:width="bgImage.width"
:height="bgImage.height"
/>
</template>
<script setup>
import Item from "../components/Item.vue";
import {computed} from "vue";
const items = computed(() => [
{
image: "/src/assets/img/flower-bouquet.svg",
width: "w-[200px]",
},
{
image: "/src/assets/img/plate.svg",
width: "w-[200px]",
},
{
image: "/src/assets/img/sunglasses.svg",
width: "w-[80px]",
},
{
image: "/src/assets/img/guitar.svg",
width: "w-[300px]",
},
{
image: "/src/assets/img/cheese.svg",
width: "w-[75px]",
},
]);
</script>
And my Item component looks like this:
<template>
<div class="absolute">
<img :src="image" :class="[width, height ]" />
</div>
</template>
<script setup>
const props = defineProps({
image: {
type: String,
required: true
},
width: {
type: String,
},
height: {
type: String,
},
)
<script>
When I look in the /dist folder, I see some images, but not the ones I’m passing from component to component:
My netlify test deploy is here:
https://64550b42bdd3ac11305000ed--robineio.netlify.app/
Is there a way to fix this?
