vue 關於圖片路徑的問題
阿新 • • 發佈:2018-10-02
當我 ann err 處理 但是 return jpg idt 那是
在vue 中,當我們想加載assets中的圖片,本人按照多年的開發經驗會這樣寫,那是沒問題的
<img src="../assets.1.jpg"/>
如果我要用v-bind去動態綁定呢,正常思路來說 我會這樣寫,但是在vue 中 他會被當成一個字符串來處理,並不會轉換為圖片的路徑
<img src="src"/> export default { name: ‘index‘, data () { return { imgsrc2: ‘../assets/1.jpg‘ } } }
正確的寫法
imgsrc2: require(‘../assets/1.jpeg‘)
如果圖片路徑不是本地靜態圖片 就不需要 require 啦
<template> <div> <img width="100" height="100" :src="imgsrc1" alt=""> <img width="100" height="100" :src="imgsrc2" alt=""> </div> </template> <script> export default { name: ‘index‘, data () { return { imgsrc1:‘http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg‘, imgsrc2: require(‘../assets/1.jpeg‘) } } } </script> <style scoped> </style>
此隨筆乃本人學習工作記錄,如有疑問歡迎在下面評論,轉載請標明出處。
如果對您有幫助請動動鼠標右下方給我來個贊,您的支持是我最大的動力。
vue 關於圖片路徑的問題