首先确定是在什么环境下不展示图片,确定你的标签是<img>还是<image>,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。
一、引用本地文件中存储的图片
(1)真机环境
(2)网页环境
二、引用localhost或者127的本地服务器图片
(1)真机环境
(2)网页环境
三、引用本地服务器开启的端口的图片
(1)真机环境
(2)网页环境
四、富文本中的图片在richtext或者v-html转义后图片不展示
(1)真机环境
(2)网页环境
一、引用本地文件中存储的图片
uniapp展示本地图片使用<image>标签都可以展示图片。但是<img>标签在网页端和真机模拟都不可以展示图片。
<template>
<view>
<image src="../../static/back/1.jpg"></image>
</view>
</template>
(1)真机环境:一般是路径问题,查看是否用了别名,看看是相对路径还是绝对路径。【一个不行换另一个】
(2)网页环境:也是一样
二、引用localhost或者127的本地服务器图片
这里就要注意了,这种情况uniapp在文档中说过如果不按文档来可能会产生只有网页端显示图片,真机端不展示图片,同样只能支持<image>标签。【一般本地测试才会用Localhost或者127,也要确定你服务器上已经有这个图片了】
<template>
<view>
<image src="http://localhost:8020/ebook/upload/01(9).jpg"></image>
</view>
</template>
(1)真机模拟:uniapp真机环境不支持Local或者127的本地请求【所以只能用端口号的请求来解决】
(2)网页环境:可以使用localhost或者127请求的本地服务器上的图片。
三、引用本地服务器开启的端口的图片
这种方案的出现就是为了解决第二种方案图片无法在真机端出现的问题。同样只支持<image>标签。记住Uniapp真机端【不管是你的手机还是平板,还是模拟器】设置请求url和图片地址都不能用localhost,只能用端口号。
查一下自己wifi或者网线连接的IPv4地址,这个应该都会就不说了。
<template>
<view>
<image src="http://192.168.10.26:8020/ebook/upload/01.jpg"></image>
</view>
</template>
(1)真机模拟:正常展示了图片。
(2)网页环境:可以使用localhost或者127请求的本地服务器上的图片,同样可以使用端口号请求到的图片。
四、富文本中的图片在richtext或者v-html转义后图片不展示
这就涉及富文本传递过来的内容是标签形式的了,在这里说这种方法是因为使用这种方法后uniapp可以识别<img>标签并展示图片。
当然更更要注意的是,虽然可以识别<img>标签,但是真机模拟还是要用端口号请求到的图片。
<template>
<view>
<view v-html="img"></view>//或者<rich-text :nodes="img"></rich-text>,v-html是vue的方法,rich-text是uniapp的方法,其实还是vue的方法好用,建议使用富文本的时候用v-html
</view>
</template>
<script>
export default {
name:"index",data(){
return{
img:'<p><img src="http://192.168.10.26:8020/ebook/upload/01.jpg" style="height: 50px;width:30px" contenteditable="false"/></p>'//注意这里是在Uniapp中使用img标签了
}
},</script>
(1)真机模拟:正常展示了图片。
(2)网页环境:正常运行。
写代码还是要仔细,一般的问题Uniapp官方文档都有解答。