在Vue.js中,assets folder(資源文件夾)是用來存儲靜態(tài)文件(如圖片,字體等)的地方。這些文件可以通過Vue組件中的或background-image來訪問,但是如何正確設(shè)置assets文件夾的路徑呢?
在Vue中,你可以直接訪問全局的$assets對象,這個對象包含了所有在/src/assets目錄下的文件。下面是一個簡單的例子,演示了如何訪問assets中的一張圖片:
<template> <div> <img :src="$assets.imgURL"> </div> </template> <script> export default { computed: { imgURL() { return require('@/assets/img/example.jpg'); } } }; </script>
在上述代碼中,<img>標(biāo)簽的src屬性被綁定到了一個計(jì)算屬性imgURL,這個屬性利用了Vue提供的require函數(shù),通過設(shè)置文件路徑來動態(tài)加載圖片。在這個例子中,我們選擇了圖片文件夾(/src/assets/img)中某張圖片的路徑,并用計(jì)算屬性imgURL將其返回。
需要注意的是,我們使用的是@符號,這是一個在Vue-cli配置中定義的別名,指向了/src目錄。我們也可以簡單地使用相對路徑來訪問assets文件夾下的文件。
上一篇vue app模糊
下一篇python 打印并換行