vue中img的src属性踩坑

这里一个朋友问到我&＃xff0c;在vue里面&＃xff0c;写了一个for循环

<div v-for&＃61;"item in 5"><img src&＃61;"../assets/img{{item}}" /></div>


需要在下面img的路径根据循环的下标 或者是item本身去改变
达到img0—img1—img2类似效果

我的建议是使用模版字符串

<img src&＃61;"../assets/img${item}" />


但是实际跑出来的时候&＃xff0c;里面的${item} &＃61;&＃61;null,所以没有达到我们要的需求。
可是src那里 &＃xff0c;也同样无法通过字符串拼接的方式达到效果&＃xff0c;这个之前就试过了。

src&＃61;&＃39;../assets/img&＃39;&＃43;{{item}}


然后转战模版字符串

<img src&＃61;"&＃96;../assets/img${item}&＃96;" />


结果还是不行。
最后网上排查了一下&＃xff0c;找到了答案。

<img v-bind:src&＃61;"&＃96;../assets/img${item}&＃96;" />


前面加上一个v-bind就完事儿了。关键就在这个v-bind上面。