vue的v-for循環中圖片加載路徑問題

產品要求

要求圖片和它的名字一一對應，
vue中的img的src可以動態綁定到一個變量上

<template> <div><ul><li v-for ="item,index in array" :key="index"><img :src="item.url"><p>{{item}}</p></li></ul> </div> </template> <script> export default { data(){return{array:[{url:'./picture/3.jpg', name:'眼影'},{url:'./picture/4.jpg', name:'眼影'},{url:'./picture/5.jpg', name:'眼影'},{url:'./picture/3.jpg', name:'眼影'},]} }, } </script><style></style>

打開控制臺顯示：img 的src 已經是一個字符串，它不是我們想要的變量了。
它對a.url進行了一次解析變成了字符串，就完事了，綁定變量，就是解析一次。而對于url 來說，它本來就是變量，無法再進行分割解析，所以它會去data 里面去找，如果找不到，才報錯。
把item.EnName 變成圖片的地址,有人提到了require 方法,require 它是一個表達式，可以進行賦值操作。

<template> <div><ul><li v-for ="item,index in array" :key="index"><img :src="item.url"><p>{{item}}</p></li></ul> </div> </template> <script> export default { data(){return{array:[{url:require(`./picture/3.jpg`), name:'眼影'},{url:require(`./picture/4.jpg`), name:'眼影'},{url:require(`./picture/5.jpg`), name:'眼影'},{url:require(`./picture/3.jpg`), name:'眼影'},]} }, } </script><style></style>

總結

以上是生活随笔為你收集整理的vue的v-for循环中图片加载路径问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。