色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue img 路徑

錢琪琛1年前9瀏覽0評論

在Vue項目中,當我們需要引入圖片資源時,通常情況下我們會使用標簽。而在將路徑傳遞給標簽時,我們需要注意路徑的相對路徑和絕對路徑的問題。

相對路徑是相對于當前文件所在目錄的路徑,而絕對路徑是相對于網站根目錄的路徑。

// 相對路徑
<img src="../assets/logo.png">
// 絕對路徑
<img src="https://example.com/assets/logo.png">

如果我們要在Vue組件中使用圖片資源,可以先在組件內進行導入。

<template>
<img :src="logo">
</template>
<script>
import logo from '../assets/logo.png';
export default {
data() {
return {
logo
}
}
}
</script>

當然也可以在Vue實例中全局導入,再通過Vue實例的方式進行引用。

// main.js
import Vue from 'vue'
import App from './App.vue'
import logo from './assets/logo.png';
Vue.prototype.logo = logo;
new Vue({
render: h =>h(App),
}).$mount('#app')
// App.vue
<template>
<img :src="logo">
</template>
<script>
export default {
data() {
return {
logo: this.$root.logo
}
}
}
</script>

通過以上方式,我們可以在Vue項目開發中,更加方便的進行圖片資源的引用和管理。