今天在做项目的分页功能时,遇到了一个问题。在项目中,我抽离了微博组件,并利用 props,使其只需要传入一个微博数组便可将其转换成微博列表展示出来。对于其中的图片,我先前采用对数组 for 循环添加前缀,来使其找到对应的路径。
但是,当我使用分页时,因我在第一页已对数组中的图片添加了地址,当我加载第二页时,又对其第一页的图片添加了地址,于是图片地址便产生了错误。
在思考了一段时间后,我便尝试把 img 标签的 :src 从原先的微博.图片名修改成地址/微博.图片名,试了试,完美。
原代码
<div v-for="weibo of weiboList" ... > ... <img alt="头像" title="头像" :src="weibo.userHead" /> ... </div>
现代码
<div v-for="weibo of weiboList" ... > ... <img alt="头像" title="头像" :src="`${publicPath}img/${weibo.userHead}`" /> ... </div>
原文地址:https://www.cnblogs.com/FreezeNow/p/12146659.html
时间: 2024-11-10 08:08:02