关于为vue的图片添加前缀地址

Posted 2021-03-19 freezenow

今天在做项目的分页功能时，遇到了一个问题。在项目中，我抽离了微博组件，并利用 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>