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

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官方文档都有解答。

uniapp图片无法显示相关推荐

uniapp图片自适应显示，不裁剪
先看图: 这是长图和方图的显示效果,都可以完全显示出来上代码: html部分: <view class="question-title" style="width ...
uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误
效果图完整代码 <template><view><image :src="popupImgSrc1" mode="aspectFit&qu ...
uni-app APP,H5图片上传添加文字水印，图片只显示左上角bug(H5,安卓App可用，其他暂未测试)
项目场景: 提示:这里简述项目相关背景: uni-app上传图片添加文字水印功能时图片只显示左上角,或者图片重叠图片不规则一系列bug,特此记录问题描述提示:这里描述项目中遇到的问题: 上传图片 ...
img 服务器上的图片不显示图片,img显示服务器图片不显示
img显示服务器图片不显示内容精选换一换您可根据需求自定义下发消息内容,例如新增场景:终端用户发送"应用魔方"时,聊天机器人自动回复该产品介绍给用户.在"ChatB ...
uni 根目录路径_如何解决uniapp图片路径错误问题
uniapp图片路径错误的解决办法:1.在根目录"manifest.json"中配置h5下的"publicPath":2.在h5配置中运行的基础路径进行配置即可 ...
uni-app图片如何设置双指放大缩小
图片设置双指放大缩小这个功能相对来说比较简单的,是用于官方文档的路径(组件->视图容器->movable-area),movable-area可以做双指放大缩小,并且放大的同时可以左右移动 ...
uni-app 图片懒加载
uni-app 图片懒加载功能实现图片懒加载,并且显示数组中,始终只有3张图片,上下滑动增加的同时,删除最开始的那一张.可以指定从总图片的第几张开始加载. 思路要实现上下滑动时的动画效果,我这里 ...
vue 加载image图片不显示解决
vue 加载image图片不显示解决------------写了个vue的demo(自己做一个表格,可以横向增加列也可以纵向增加行)想给demo加图片怎么都出不来,,,,,查图片太大?加载位置不对?配 ...
打包后图片不显示问题
设置publicPath 在vue.config.js 配置文件中 // 打包app时放开该配置publicPath: process.env.NODE_ENV === 'development' ? ...

uniapp图片无法显示

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

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

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

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

uniapp图片无法显示相关推荐

最新文章

热门文章