Vue3+Vant3通过mock引入本地图片路径

简介: Vue3+Vant3通过mock引入本地图片路径

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[]

a7e414c526c542a38860c56292335c35.png

在接口中只需要写入图片名称,通过函数的形式拼接字符串,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>
相关文章
|
2天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
8 0
|
3天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
10 3
|
5天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
18 0
|
5天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
5天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
16 0
|
5天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
22 0
|
5天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
29 0
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
10 1
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
13 0
|
5天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
10 0