javascript - vue使用v-for,加载图片失败, 会出现闪烁的问题, 求解决

Question

• 每隔一秒会刷新数据, 数据使用v-for同步到视图层, 正常情况下没问题, 当其中一个图片出现加载失败时, 就会出现一直闪烁的问题

• 尝试使用的解决方案:

1. img上加onerror="this.src=xxxx", 错误时指向一个正确的图片地址, 效果没变化

2. 把图片转成base54依然会有这样的问题

• 演示地址:http://runjs.cn/code/cxyd8wut

• 求解决方案!

Answer 1

看你demo用的vue 1，可以加上track-by="id"

<li v-for="u in users" track-by="id">

同一个id，url也没变的话，不会重新创建img，就不闪了

Answer 2

这个好像不需要解决方案吧？你每秒都重新渲染。本来的效果就应该是这样啊。

Answer 3

正常的逻辑下不会有这问题，可能是这个在线编辑器的问题，视图的iframe每隔一秒就重载你写的js,你看一下页面的元素，其实是页面重新渲染的问题

Answer 4

这个是图片地址的问题吧，检查一下图片的路径