Issue
I'm working on a Portfolio site. I've come into an issue with my site. Everything works perfectly fine when I run it through npm run dev
but once I do npm run preview
some of the images do not work. These images are in the files called 3dModellingFiles.ts
and then gets displayed in 3dModelling.vue
.
As said, it works in the dev but not the preview. On the preview side it just shows as text: ../src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png
Vue.js
<script setup lan="ts">
...
import { twenty_three, twenty_twenty } from "@/components/Software/3dModelling/Files/3dModellingFiles"
...
</script>
<template>
...
<h2 id="year-2020" class="text-pf-red-300 text-3xl underline font-arial font-bold mt-10">2020</h2>
<div v-for="twentyTwenty in twenty_twenty" :key="twentyTwenty.id.value" :id="'year-' + twentyTwenty.date.getFullYear()">
<div class="bg-pf-red-950 bg-opacity-10 p-2 my-5 rounded hover:bg-opacity-30 flex">
<div class="m-2 mr-5 flex-shrink-0">
<img class="rounded"
:src="twentyTwenty.image"
:alt="twentyTwenty.image"
style="width: 350px; object-fit: cover;">
</div>
<div class="flex flex-col">
<div>
<h1 class="text-white text-2xl font-arial font-bold mt-2">{{ twentyTwenty.title }}</h1>
<h1 class="text-woodsmoke-300 text-md font-arial">{{ twentyTwenty.date.toLocaleDateString('en-GB') }}</h1>
</div>
<h1 class="text-white text-lg font-arial mt-4">{{ twentyTwenty.description }}</h1>
</div>
</div>
</div>
...
</template>
3dModellingFiles.ts
import {ref} from 'vue';
export const twenty_three = [
{
id: ref(1),
title: "Badge Stand",
description: "Description Text",
date: new Date("2023-11-27"),
image: "../src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png"
},
]
What am I doing wrong?
EXTRA NOTE - NOT MY QUESTION
I've tried some other changes on another page by doing it like ./components/
which gives me a get 404 error in the console log
DecafMechanics.png:1
GET http://localhost:4173/components/Software/Projects/Files/Images/2023/DecafMechanics.png
Solution
If you want dynamically use image like :src="image" form your static folder,the variable "image" need use import in vue3,or use require() in vue2
import {
ref
} from 'vue';
import image from '@/src/components/Software/3dModelling/Files/Images/2023/Badge_Stand_(27_11_2023).png'
export const twenty_three = [{
id: ref(1),
title: "Badge Stand",
description: "Description Text",
date: new Date("2023-11-27"),
image
]
Answered By - moon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.