uni-app 【已解决】image图片不渲染显示

uni-app 【已解决】image图片不渲染显示

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

<template>  
    <view class="page">  
        <view v-for="(item, index) in data" :key="index">  
            <image :src="item.category_img" style="width: 40px; height: 40px" />  
            <view>{{ item.category_name }}</view>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            data: [  
                {  
                    category_name: '扳手',  
                    category_img: 'https://static.mymro.cn/product_images_new/115/1S8/2012101717250549655.JPG'  
                },  
                {  
                    category_name: '手用套筒',  
                    category_img: 'https://static.mymro.cn/product_images_new/115/1C7/2013010815471880019.JPG'  
                }  
            ]  
        };  
    }  
};  
</script>

预期结果：

显示图片

实际结果：

图片没有正确显示

bug描述：

图片不能显示

<template>  
    <view class="page">  
        <view v-for="(item, index) in data" :key="index">  
            <image :src="item.category_img" style="width: 40px; height: 40px" />  
            <view>{{ item.category_name }}</view>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            data: [  
                {  
                    category_name: '扳手',  
                    category_img: 'https://static.mymro.cn/product_images_new/115/1S8/2012101717250549655.JPG'  
                },  
                {  
                    category_name: '手用套筒',  
                    category_img: 'https://static.mymro.cn/product_images_new/115/1C7/2013010815471880019.JPG'  
                }  
            ]  
        };  
    }  
};  
</script>


更多关于uni-app 【已解决】image图片不渲染显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

看你代码里图片地址后面不是有个\n么 是不是这个影响的?

更多关于uni-app 【已解决】image图片不渲染显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


图片链接加到域名信息里面了嘛？

浏览器打开个网址需要加什么域名信息？

回复 清霆: h5的，浏览器不显示看看是不是浏览器阻止了。先排除浏览器问题吧。看代码目测没啥问题的。看看浏览器有没有加载资源啥的。

回复 天线宝宝: APP、web、小程序，都不显示

11111111111111111111111111111111111111111111111111111

麻烦问下 我好像出现了同样的问题 你是怎样解决的

似乎是图片本身类型和后缀名不符导致不显示。

回复 清霆: 也是遇到这个问题啊，有解决方案了吗

这是一个常见的网络图片加载问题。从截图看，图片链接是HTTPS协议且域名正常，但图片未能渲染。建议按以下顺序排查：

  1. 检查图片链接有效性：直接在浏览器中打开图片URL（https://static.mymro.cn/product_images_new/115/1S8/2012101717250549655.JPG），确认图片可正常访问。

  2. 添加图片加载失败监听：修改image组件，添加错误处理：

<image 
    :src="item.category_img" 
    style="width: 40px; height: 40px"
    @error="onImageError(index)"
/>

methods: {
    onImageError(index) {
        console.log(`图片${index}加载失败`);
    }
}
  1. 检查网络权限：确认项目manifest.json中已配置网络请求权限：
{
    "networkTimeout": {
        "request": 10000
    }
}
回到顶部