向 Vue 中的 img 元素动态传入 src 值

[Dream4ever]

需求描述

如标题

解决过程

Google 关键字 vue dynamic bind image src，第一个 Stack Overflow 的链接中就有答案：Vue.js dynamic images not working。

具体代码很简单，用下面的方法来动态生成图片的地址，关键是返回的图片地址要用 require() 给包起来。

topThree(index) {
    return require(`@/assets/game1/img/rank/rank-${index}.png`)
}

然后在 Vue 的 template 中动态绑定到 img 元素的 src 属性上即可：

<img :src="topThree(index + 1)">