我正在使用 Vue.js 3 Vite.js 構建我的專案。該應用程式在開發模式下（使用開發服務器時）運行良好。一旦我啟動了構建命令，Vite 就會為我創建 /dist 目錄，其中包含我的應用程式的構建。如果我運行預覽命令（vite 預覽），它會毫無問題地開始我的構建預覽。
問題在于一些來自 Vue 組件的影像。我專案的所有影像都在 src/assets 目錄中。
.
├── Attribution.txt
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── Temp.png
│ │ ├── bridge.png
│ │ ├── city-security.png
│ │ ├── credit-card.png
│ │ ├── deforestation.png
│ │ ├── eagle.png
│ │ ├── favicon
│ │ │ ├── android-chrome-192x192.png
│ │ │ ├── android-chrome-512x512.png
│ │ │ ├── apple-touch-icon.png
│ │ │ ├── favicon-16x16.png
│ │ │ ├── favicon-32x32.png
│ │ │ └── favicon.ico
│ │ ├── global-goals.png
│ │ ├── hall.png
│ │ ├── italian-flag.png
│ │ ├── machine-learning.png
│ │ ├── modern-architecture.png
│ │ ├── moon-festival.png
│ │ ├── people.png
│ │ ├── planet-earth.png
│ │ ├── police.png
│ │ ├── teamwork.png
│ │ ├── uk-flag.png
│ │ └── virtual.png
│ ├── components
│ │ ├── Button.vue
│ │ ├── Card.vue
│ │ ├── Column.vue
│ │ ├── Footer.vue
│ │ ├── MainContent.vue
│ │ ├── Navbar.vue
│ │ └── components-it
│ │ ├── Card-it.vue
│ │ ├── Footer-it.vue
│ │ └── Navbar-it.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── tailwind.css
│ └── views
│ ├── CitySecurity.vue
│ ├── Contribute.vue
│ ├── Credits.vue
│ ├── Goals.vue
│ ├── Home.vue
│ ├── It
│ │ ├── CitySecurity-it.vue
│ │ ├── Contribute-it.vue
│ │ ├── Credits-it.vue
│ │ ├── Goals-it.vue
│ │ ├── Home-it.vue
│ │ └── Municipality-it.vue
│ └── Municipality.vue
├── tailwind.config.js
└── vite.config.js
視圖中的影像具有正確的路徑并在構建中正確顯示。但是 components 檔案夾中的影像有一個問題：構建檔案中的路徑沒有改變。
IE
<template>
<Navbar />
<div class="container flex flex-col items-center py-20 font-bold mx-auto">
<h1 class="uppercase text-3xl">A new way to live the City</h1>
<img src="../assets/hall.png" alt="Town Hall" width="250" class="py-10" />
<p class="lg:w-1/2 text-justify leading-relaxed">
To improve the municipality livings being we tought about some ideas, that
are somehow able to improve the qol(Quality of life). One of the most
reliable problem that requires to be solved is the minimization of
burocracy, tryna to make things digital any sort of procedure. One of ours
ideas is to improve the mechanism of shifting around the city, by giving
cityzens public and shareble veichles to reduce pollution and the waste of
fuel.
</p>
<div class="grid lg:grid-cols-3 lg:gap-0 gap-10 place-items-center pt-20">
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Digitalization</h1>
<img
class="py-5"
src="../assets/virtual.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
Burocracy is so annoying, so we tought about how we can semplify it.
The Answer is... DIGITALIZATION! Everything's simpler when digital, so
our city is going to have a system for all of them.
</p>
</div>
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Infrastructures Upgrading</h1>
<img
class="py-5"
src="../assets/bridge.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
To make our city better, our city is going to invest in
infrastructures to let cityzens live their life much better. Better
"bridges" makes better people.
</p>
</div>
<div class="card container flex flex-col items-center justify-center">
<h1 class="uppercase text-xl">Innovative Learning</h1>
<img
class="py-5"
src="../assets/Machine-Learning.png"
alt="Digitalization"
width="100"
/>
<p class="lg:w-full text-justify lg:w-3/5 lg:leading-relaxed w-3/4">
Our city is going to offer a learning system to make everyone learn
about technologies and new innovation. The mind of a man is the most
precious part of him.
</p>
</div>
</div>
</div>
<Footer />
</template>
<script>
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
import Button from "../components/Button.vue";
export default {
name: "Municipality",
components: {
Navbar,
Footer,
Button,
},
};
</script>
<style></style>
這是我的觀點之一。在構建中，所有 img 標簽都將具有正確的路徑（例如：/assets/imgName.randomNumbersAndString.png）。
但這不會發生在組件中。
ie - Card.vue 組件
<template>
<div
class="card container flex flex-col items-center justify-center pt-20 pb-20"
>
<a :href="`${link}`">
<img
:class="`${imgClass || 'py-5'}`"
:src="`./src/assets/${imgName}`"
:alt="`${imgAlt}`"
width="100"
/>
</a>
<p class="lg:w-full lg:w-3/5 lg:leading-relaxed w-3/4">{{ text }}</p>
</div>
</template>
<script>
export default {
name: "Card",
props: {
link: String,
imgClass: String,
imgName: String,
imgAlt: String,
text: String,
},
};
</script>
<style scoped></style>
Credits.vue 視圖
<template>
<Navbar />
<h1 class="uppercase lg:text-5xl text-2xl mx-auto text-center pt-20">
Images and Icons attributions
</h1>
<div class="grid lg:grid-cols-3 place-items-center lg:pb-10 mx-auto">
<Card
link="Hall icons created by Smashicons - Flaticon"
text="Hall icons created by Smashicons - Flaticon"
imgAlt="Hall vector representation"
imgName="hall.png"
/>
<Card
link="https://www.flaticon.com/free-icons/moon-festival"
text="Pokemon icons created by Roundicons Freebies - Flaticon"
imgAlt="Temp logo"
imgName="Temp.png"
/>
<Card
link="https://www.flaticon.com/free-icons/moon-festival"
text="Moon festival icons created by Flat Icons - Flaticon"
imgAlt="Moon vector representation"
imgName="moon-festival.png"
/>
<Card
link="https://www.flaticon.com/free-icons/digital"
text="Digital icons created by Freepik - Flaticon"
imgAlt="Digital vector representation"
imgName="virtual.png"
/>
<Card
link="https://www.flaticon.com/free-icons/tower-bridge"
text="Tower bridge icons created by Freepik - Flaticon"
imgAlt="Bridge vector representation"
imgName="bridge.png"
/>
<Card
link="https://www.flaticon.com/free-icons/machine-learning"
text="Machine learning icons created by Flat Icons - Flaticon"
imgAlt="Machine learning vector representation"
imgName="machine-learning.png"
/>
<Card
link="https://www.flaticon.com/free-icons/business-and-finance"
text="Business and finance icons created by Freepik - Flaticon"
imgAlt="City security vector"
imgName="city-security.png"
/>
<Card
link="https://www.flaticon.com/free-icons/credit-card"
text="Credit card icons created by Freepik - Flaticon"
imgAlt="Credit card vector"
imgName="credit-card.png"
/>
<Card
link="https://www.flaticon.com/free-icons/deforestation"
text="Deforestation icons created by Freepik - Flaticon"
imgAlt="Deforestation vector representation"
imgName="deforestation.png"
/>
<Card
link="https://www.flaticon.com/free-icons/eagle"
text="Eagle icons created by Freepik - Flaticon"
imgAlt="Eagle vector"
imgName="eagle.png"
/>
<Card
link="https://www.flaticon.com/free-icons/modern-architecture"
text="Modern architecture icons created by Freepik - Flaticon"
imgAlt="Modern architecture vector"
imgName="modern-architecture.png"
/>
<Card
link="https://www.flaticon.com/free-icons/environment"
text="Environment icons created by Freepik - Flaticon"
imgAlt="Earth planet vector"
imgName="planet-earth.png"
/>
</div>
<div class="container mx-auto flex flex-row items-center justify-center text-center">
<Card
link="https://www.flaticon.com/free-icons/police"
text="Police icons created by Freepik - Flaticon"
imgAlt="Police officer vector"
imgName="police.png"
/>
<Card
link="https://www.flaticon.com/free-icons/collaboration"
text="Collaboration icons created by Freepik - Flaticon"
imgAlt="Community vector"
imgName="teamwork.png"
/>
</div>
<Footer />
</template>
<script>
import Card from "../components/Card.vue";
import Navbar from "../components/Navbar.vue";
import Footer from "../components/Footer.vue";
import Button from "../components/Button.vue";
export default {
name: "Credits",
components: {
Navbar,
Footer,
Button,
Card,
},
};
</script>
<style scoped></style>
在這種情況下，當我將imgName傳遞給 Card 組件時，在構建檔案中，影像的路徑是 ./src/assets/name.png。
我該如何解決？
uj5u.com熱心網友回復：
問題是，您將檔案名作為屬性傳遞給組件。然后，組件中的完整影像路徑將從路徑和變數檔案名派生。然而，這樣的動態路徑是不可能的，因為所有匯入路徑都需要在構建時定義。使用您的組件，理論上您可以傳遞例如來自遠程服務器的字串或隨機字串作為檔案名，因此 Vite 在構建期間沒有機會找到這些影像。
對此的解決方案非常簡單：無需將部分路徑（檔案名）傳遞給組件，只需將匯入的影像直接作為屬性傳遞即可。圖片會自動決議為Vite可以決議的絕對檔案路徑。
這是一個例子：
<template>
<Card :image="Teamwork" />
</template>
<script>
import Teamwork from '../../assets/teamwork.png';
export default {
setup: () => {
return { Teamwork };
}
};
</script>
使用選項 API，您還可以將影像通過data或computed傳遞給模板。使用 TypeScript，您還需要為影像定義 shim，以便您可以匯入影像。
uj5u.com熱心網友回復：
(..)您可以使用@/assets任何 vue 組件來參考 assets 檔案夾中的檔案，而不是使用 assets 檔案夾的相對路徑。
例如，無論 Vue 組件嵌套多深，這都應該有效。
<img src="@/assets/images/name.png"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/419960.html
標籤：