問題：

使用v-for循環， :src="item.url"，綁定圖片無法顯示，只能寫成靜態結構；

原因：

直接寫成靜態的，會經過webpack進行編譯，從而得到打包后正確的圖片真實路徑。
如果你寫成動態的，webpack就不會進行編譯，原封不動的把'~/assets/img/home.png' 放到你圖片的src里面，'http://xxx.xxx.xxx/~/assets/i...'不存在這張圖片！

解決方法1：

把圖片存在服務器，使用網絡路徑，

解決方法2：

使用require和相對路徑引用圖片

{ src: require("../static/gzEducation/fl/1.png") }//跳出1層還是2層目錄，根據自己的所在位置來決定

data中的數據：

 data() {  return {   flList: [     { src: require("../static/gzEducation/fl/1.png") },   ], }

vue循環結構：

  <section >   <div class="item"v-for="(item,index) in flList" :key="index">   <img :src="item.src" alt="背景圖片">   </div>  </section>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網之家。