uniapp中image组件爬坑：如果src中含有反斜杠“\”会引起各种问题

最新推荐文章于 2024-06-30 19:44:42 发布
原创 最新推荐文章于 2024-06-30 19:44:42 发布 · 3.4k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文探讨了在Vue框架中使用双斜杠()作为转义字符导致图片无法正常显示的问题。通过修改图片路径的表示方式，从使用Vue的image组件转为采用原生的img标签，成功解决了这一难题。

两个“\”转义

vue中的image如下
<image :src="paidImgUrl" mode=""></image>

paidImgUrl的值如下
paidImgUrl:"http://wjyz.hebau.edu.cn/YZCS/upload\\img\\fkjt\\146\\2.jpg",

页面渲染以后
在这里插入图片描述
实际地址是能拿到图的，但是在页面上面没有显示，他去获取的时候是这样的
在这里插入图片描述

里面的\被当成转义符了，不知道为什么，但是用chrome控制台审核元素的时候，确实能拿到。

解决

改用原生的img

uni-app使用转义字符
qq_39131699的博客
04-23 3808
需求          需要在界面上显示<> 问题 直接在dom中写的时候报错 [ WXML 文件编译错误] ./pages/register/register.wxml unexpected character `�` > 1 | <view class="register data-v-891c2434"><cu-custom vue-id="9a676040-1" bgCol
5.uniapp中image属性用法
m0_49714202的博客
04-09 4946
1
解决uniapp跳转页面传递特殊符号参数的时候出现问题
weixin_46212682的博客
06-09 1228
解决uniapp跳转页面传递特殊符号参数的时候出现问题
uni-app image组件将图像url里的反斜杠处理成乱码
weixin_48495574的博客
02-26 704
问题描述： 因后端返回数据问题url连接存在\反斜杠，然后图像没有渲染出来。 返回的url： 经过image组件渲染后的url： 反斜杠部分经过渲染后已成乱码。 解决方法： 修改返回的url把反斜杠修改为正斜杠 imageUrl.replace(/\\/g,"/"); //通过replace更换字符 ...
微信小程序Img标签中斜杠(/)与反斜杠(\)的区别
qq_28670711的博客
07-15 5235
最近在写微信小程序，其实里面的坑还是又不少的。今天就遇到一个正反斜杠的问题。正好今天写的是图片上传的模块，本地先上传文件，返回给你一段服务器上的图片的地址，然后在小程序端显示。结果在返回的地址是 http://###.####.com:10030/service/download/apps?name=apps\workflow\20190\20190712121854_20...
uniapp 图片 image src内容为变量时不显示图片解决方法。
最新发布
m0_74358570的博客
06-30 1782
关于uniapp 图片（image）src内容为变量时不显示图片解决方法
uni-app请求图片的路径是反斜杠如何解决
Xinacridine的博客
04-09 1331
uni-app做app项目的时候，请求到的图片链接路径有反斜杠，但是能在浏览器上打开，在页面就报错 页面显示之后报的错，实际上是能拿到照片的，因为里面的\被当成转义符了，被转义了 解决方法 this.bottom_img = res.data.data.bottom_img.replace(/\\/g,"/"); 可以使用.replace(/\\/g,"/");来改变图片路径。这样就能显示了 ...
uniapp image 动态引入路径不显示
paidaboluo的博客
09-14 6747
uniapp image 动态引入路径不显示
关于uniapp中动态设置image的src不生效
qq_40652539的博客
06-13 4711
场景：父组件传值到子组件父组件
微信小程序转uniapp：4）微信image等控件的src路径不匹配。
sziitjin的博客
11-18 1264
微信小程序转uniapp后，uniapp会自动创建一个static文件夹，并把微信原来的resources文件剪切到static文件下。 因此会导致原先image控件的路径无法找到对应的图片（其他资源文件同理），这时候需要手动修改一下。 修改前 <image src="/resources/images/a.png"></image> 修改后 <image src="/static/resources/images/a.png"></image>
uniapp中的image的src=“路径”图片不显示
m0_64207574的博客
11-13 3157
uniapp中的image的src=“路径”图片不显示
【uniapp】如何在src中使用插值语法
ONLYSRY的博客
07-27 1670
page3img与page3text的值都是我们这边传过去的。
uni-app图片显示
gugugutime.com
11-25 4906
image标签
css解决uniapp使用image标签图片无法撑满全屏问题
热门推荐
qq_43205326的博客
11-25 1万+
css解决图片无法撑满全屏问题
uni-app——uniapp 中 image src 网络图片和本地图片使用的区别
qq_43201350的博客
01-20 2097
uni-app——uniapp 中 image src 网络图片和本地图片使用的区别
src中的 “/”、“./”与“../”
little_White12的博客
01-25 3031
Src中的地址格式 在src中有以下三种地址格式，分别为：/、./和../他们的区别如下 1."/"表示代表文件所在的根目录； 2."./"表示代表文件所在的目录（可以省略不写）； 3."../"表示文件表示文件所在的父级目录。 ...
关于使用 Element UI 的 el-image 组件导致本地图片不显示的问题
Alan_Walker688的博客
07-08 1万+
当使用 el-image 在网页中加载本地图片时，会出现图片加载失败的问题，但使用 img 可以正常显示。
uni-app返回的数据不是转义字符串的解决方法
小菜鸟的博客
11-27 3756
uni-app返回的数据不是转义字符串的解决方法 首先这是什么意思呢 就是返回的数据是带有html标签的字符串 其实很好解决uni-app有个自带的富文本标签rich-text 将其node节点绑定到数据就ok了 <rich-text :nodes="content"></rich-text> 下面在额外补充vue转义的方法 一般直接用v-html 来转义 但是有的时候转义不怎么理想怎么办 // item.message html标签反转义 HTMLEncode(
Vue项目中图片路径反斜杠问题
Jim Suen
11-27 4330
问题描述 打开接手的一个项目中发现背景图不显示，F12后发现路径被解析成了 css background: url(/abc\imgs\background.jpg) no-repeat center; 手动在浏览器中把反斜杠改为斜杠图片正常显示 css background: url(/abc/imgs/background.jpg) no-repeat center; 查看代码，代码中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值