About adding a prefix address vue pictures

Today when doing pagination project, I encountered a problem. In the project, I pulled out microblogging components, and using props, so that it only needs to pass an array of micro-Bo can be converted into a microblogging list displayed. For one of the pictures, I was previously using an array for loop to add a prefix to it to find the corresponding path.

However, when I use paging, because I was on the first page has been added to the array of pictures of address, when I load the second page, and add their picture on the first page of the address, so they had a picture address error.

After thinking for a while, I will try to put the img tag:. Src microblogging pictures from the original name modified to address / name microblogging pictures, tried, perfect.

Original code

<div
      v-for="weibo of weiboList"
      ...
    >
    ...
    <img alt="头像" title="头像" :src="weibo.userHead" />
    ...
</div>

Now the code

<div
      v-for="weibo of weiboList"
      ...
    >
    ...
    <img alt="头像" title="头像" :src="`${publicPath}img/${weibo.userHead}`" />
    ...
</div>

 And, I thought paging function is difficult to do so they did not do, now do it, I feel is really very simple, only need to store a current page number just fine.

Guess you like

Origin www.cnblogs.com/FreezeNow/p/12146659.html