mock/user.ts
import { MockMethod } from 'vite-plugin-mock' // import { Random } from 'mockjs'; export default [ { url: '/api/getUserInfo', // 注意,这里只能是string格式 method: 'get', response: () => { return { 'list|5-10': [{ "name": '@cname', "url": 'choose1.png', "sportsman": '足球运动员', 'age':'29' }], } } }, ] as MockMethod[]
在接口中只需要写入图片名称,通过函数的形式拼接字符串,vite中有专门的写法。
组件中通过new Url('路径/${图片}',import.meta.url).href
const imgList = (name: any) => { return new URL(`@/assets/image/duiyuan/${name}`, import.meta.url).href; };
引入:
<van-image round width="47px" height="47px" :src="imgList(item.url)" /> <div class="list" v-for="(item,index) in listName" :key="index"> <van-image round width="47px" height="47px" :src="imgList(item.url)" /> <div class="list-content"> <h4>{{item.name}}</h4> <p>{{item.sportsman}}/<span>{{item.age}}岁</span></p> </div> <van-button style="margin-left: auto;" type="primary" round color="#D22E34">选择</van-button> </div>