Mock模拟数据时，图片无法加载

最新推荐文章于 2023-11-28 10:04:05 发布

Miketutu

最新推荐文章于 2023-11-28 10:04:05 发布

阅读量564

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/Miketutu/article/details/128904500

版权

在使用Mock模拟图片数据时，前端页面无法渲染图片，控制台出现报错。问题出在图片大小上，当直接打开图片地址，显示图片过大。调整Mock配置中图片尺寸（如从140*140改为更小尺寸）后，图片能正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用Mock模拟图片数据时，前端页面无法渲染图片

并且在控制台报错

但是模拟图片的地址是有的，当单独打开图片地址时

显示图片过大

mock配置代码

//调用Mock.mock方法生成随机数据
Mock.mock(()=>{
    for(let i = 0;i<10;i++){
        // eslint-disable-next-line no-unused-vars
        const a = '#' + Random.integer(180,255).toString(16)+
        Random.integer(140,255).toString(16)+Random.integer(120,220).toString(16)

        let t = null //用来存放Random随机生成的用户名
        let male = ['男','女']
        data.push({
            userId:1001+i,
            userName:t=Random.cname(),
            userMale:male[Random.integer(0,1)],//随机获取（0-1）随机数，将该随机数作为male数组的下标，获取随机性别
            headImage:Random.image('140*140',a,t),//生成随机图片：第一个参数：图片的大小，第二个参数是颜色，第三个参数是文本
            userBirthday:Random.datetime('yyyy-MM-dd HH:mm:ss'),
            userAddress:Random.county(true)
        })
    }
})
//查询所有接口
Mock.mock('/api/find','get',data)

将headImage:Random.image('140*140',a,t)中的140*140改小一点，图片正常显示