# 靜態引入方式  # 動態引入方法 ~~~ <template> <div> <p>this is swiper</p> <img :src="img_url" alt=""> <!--動態VUE引入圖片標簽--> </div> </template> <script> export default { data:function (){ return{ img_url:require('@/assets/img/1.png') //圖片路徑 需要用require()這個路徑函數 } } } </script> <style scoped> img{ width:500px; height: 350px; } </style> ~~~ # 引入public里的靜態資源 在public下創建一個img文件夾 以下為2種方式 cli里默認找的就是public這個文件夾 ``` <img src="../../public/img/1.png"> ``` ``` <img src="/img/1.png"> ```