微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource

背景

通过用户点击上传图片，通过res.tempFilePaths拿到用户上传的图片路径之后，保存并进行页面渲染。

个人见解问题原因

1. 先把重要的事情说三遍：这个报错主要原因是图片渲染失败导致的，渲染失败导致的，渲染失败导致的。
2. 请检查渲染的图片是否有拼接错误 / 图片数据错误。
3. 如渲染的图片确定没问题，就检查这一点：可能渲染图片的时候，还没有图片数据；解决：在image标签的外层加上图片数据判断，先判断，再渲染。如<template v-if=" shopInfo && shopInfo.shopImage "> 图片标签 </template>

我的代码及情景

目标代码

渲染图片时，所写代码如下

结果就报了错误

经过仔细查验后，才发现我循环渲染的数据只有一个“h”，所以渲染的数据参数不对。

其实出现这个报错多数原因是因为渲染的图片路径错误所导致的。

如果你实在想不通为什么会出现这个错误，不妨把你要渲染的图片数据以文本形式展示出来，观察渲染的文本数据，大概率你会发现问题所在！