uniapp图片无法显示

首先确定是在什么环境下不展示图片,确定你的标签是还是,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。

一、引用本地文件中存储的图片

        (1)真机环境

        (2)网页环境

二、引用localhost或者127的本地服务器图片

        (1)真机环境

        (2)网页环境

三、引用本地服务器开启的端口的图片

        (1)真机环境

        (2)网页环境

四、富文本中的图片在richtext或者v-html转义后图片不展示

        (1)真机环境

        (2)网页环境

一、引用本地文件中存储的图片

        uniapp展示本地图片使用标签都可以展示图片。但是标签在网页端和真机模拟都不可以展示图片。

       (1)真机环境:一般是路径问题,查看是否用了别名,看看是相对路径还是绝对路径。【一个不行换另一个】

uniapp图片无法显示_第1张图片       

        (2)网页环境:也是一样

uniapp图片无法显示_第2张图片

 二、引用localhost或者127的本地服务器图片

        这里就要注意了,这种情况uniapp在文档中说过如果不按文档来可能会产生只有网页端显示图片,真机端不展示图片,同样只能支持标签。【一般本地测试才会用Localhost或者127,也要确定你服务器上已经有这个图片了】

uniapp图片无法显示_第3张图片

        (1)真机模拟:uniapp真机环境不支持Local或者127的本地请求【所以只能用端口号的请求来解决】

        uniapp图片无法显示_第4张图片

        (2)网页环境:可以使用localhost或者127请求的本地服务器上的图片。

uniapp图片无法显示_第5张图片

 三、引用本地服务器开启的端口的图片

        这种方案的出现就是为了解决第二种方案图片无法在真机端出现的问题。同样只支持标签。记住Uniapp真机端【不管是你的手机还是平板,还是模拟器】设置请求url和图片地址都不能用localhost,只能用端口号。

        查一下自己wifi或者网线连接的IPv4地址,这个应该都会就不说了。

        uniapp图片无法显示_第6张图片

        (1)真机模拟:正常展示了图片。

        uniapp图片无法显示_第7张图片

        (2)网页环境:可以使用localhost或者127请求的本地服务器上的图片,同样可以使用端口号请求到的图片。

        uniapp图片无法显示_第8张图片

  四、富文本中的图片在richtext或者v-html转义后图片不展示

        这就涉及富文本传递过来的内容是标签形式的了,在这里说这种方法是因为使用这种方法后uniapp可以识别标签并展示图片

        当然更更要注意的是,虽然可以识别标签,但是真机模拟还是要用端口号请求到的图片。

        





          (1)真机模拟:正常展示了图片。

uniapp图片无法显示_第9张图片

        (2)网页环境:正常运行。

 uniapp图片无法显示_第10张图片

         写代码还是要仔细,一般的问题Uniapp官方文档都有解答。

你可能感兴趣的:(html,webview,vue.js,uni-app,前端)