在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項目開發中,更加方便的進行圖片資源的引用和管理。
上一篇html怎么設置兩端對齊
下一篇html怎么設置元素位置