mpvue图片资源踩坑

最新推荐文章于 2020-09-15 16:23:29 发布

原创最新推荐文章于 2020-09-15 16:23:29 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mpvue #小程序

mpvue 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了MPVue项目中图片加载的问题，特别是在手机设备上的显示异常。通过对比不同加载方式，发现直接使用完整字符串作为src属性能有效避免加载失败的情况。最终解决方案是在图片元素上添加v-if指令。

mpvue图片资源踩坑

mpvue项目引入的放在服务的图片，采用src拼接的形式对图片进行渲染。
在这里插入图片描述

在电脑模拟器可以加载成功，但是手机上渲染不出来，检验了所有可能，而且图片的src也能正确打印，控制台依然有对应的报错。
在这里插入图片描述

后来发现当我把src换成整个一个字符串或者是一个变量而不是字符串和变量拼接的时候就不会出来出现这个问题。
最后的解决办法是加v-if
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZeX_ng

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

mpvue开发微信小程序上传图片（附后端代码）（含城市联动，多项选择功能代码全）

boy火巨的博客

05-15

2380

小程序也是可以上传图片的，微信小程序文档也写的很清楚。先看效果图GIF 上传图片通过wx.chooseImage(OBJECT)实现官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType...

mpvue小程序以及微信直播踩坑总结

03-29

我是比较熟悉vue的语法，但是也犹豫过是用原生还是用mpvue，因为那时候原生小程序已经相当成熟而mpvue才刚出来（踩坑和填坑的前人还很少）所以我学习了几天原生的框架和语法，果断选择了mpvue，真的是没有对比就...

参与评论您还未登录，请先登录后发表或查看评论

mpvue小程序、小程序图片上传到阿里云oss

qq_35430000的博客

12-13

1664

本项目使用 mpvue 框架开发小程序，小程序或者h5项目可参考，大体都一样的逻辑。效果如下：首先比较重要的一点，就是要请求后端接口获取 oss的签名，oss的签名是啥？可以参考 oss官方文档 https://help.aliyun.com/document_detail/92883.html?spm=a2c4g.11186623.6.650.61462f08xMkvoQ 也就是前端...

mpvue小程序上传图片的使用和删除

wei80231996的博客

09-15

282

# 在当前所用的template模板中嵌入html、以下代码 <div class="p10_15"> <upload_ :upload_info="upload_info" ref="uploads" @cb="get_choose_img" ></upload_> </div> ## 在script中引入upload组件 import uplo

vue_upload图片上传支持拖拽

10-26

vue_upload图片上传支持拖拽，vue_upload图片上传支持拖

mpvue入坑之背景图片无法使用

听风看海的博客

04-21

3708

问题想要给当前的元素设置一个背景图片，但是background-image:url()无效？前奏在微信小程序上不管你是这样使用标签引入 <view style="background:url('../../img/p.png')"></view> 还是使用外部样式表引入都是无效的，没什么软用解决使用img标签代替，在img上绑定图片的地址，经过探索发现wx不支持...

mpvue开发音频类小程序踩坑和建议详解

10-17

【mpvue 开发音频类小程序踩坑和建议详解】在开发微信小程序的音频类应用时，选择使用mpvue框架可以带来一定的便利性，因为它允许使用Vue.js语法进行开发，这有助于提升开发效率。然而，初次接触mpvue和微信小程序...

mpvue精选资源汇总：awesome-mpvue-master

接下来，描述“awesome-mpvue：与mpvue相关的精选精彩清单”进一步强调了“awesome-mpvue”清单的内容与mpvue相关，收录了众多与mpvue相关的精选资源和工具。这些资源可能包括但不限于mpvue的官方资源、第三方组件、...

mpvue和云开发写的一款小程序，踩坑记录.zip

热门推荐

Github.com/liangfengbo

04-24

2万+

mpvue开发小程序时候，要添加静态本地图片 &amp;amp;lt;img src=&amp;quot;../../images/bg.png&amp;quot; alt=&amp;quot;&amp;quot;&amp;amp;gt; 会报错： VM14878:2 Failed to load local image resource /images/bg.png the server responded with a status of

vue学习笔记一：vue项目中设置背景图片

Fiona_lms的博客

04-09

2万+

这几天在用vue开发一个项目，真的是到处都是坑啊，就连设置图片背景，也和前面用的不一样了，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来， background:url("../static/img/icon.png") no-repeat; background-size:cover; width:10rem; height:5rem; 用了这个就报了一堆错,后...

mpvue写微信小程序-图片引入（一）

g2526的博客

11-08

4479

1、快速上手（http://mpvue.com/mpvue/quickstart/）按官网给出流程，创建：运行后，在微信工具查看：编辑器中查看目录结构：为了运行的话这个项目算是完结，但是在想写自己的项目又遇到了问题。 2、实际操作引用图片原来写过的小程序，所以一开始我是把图片文件夹放在pages文件夹同级，然后调用爆出这个问题： ...

vue移动端rem适配--附带引入第三方库解决方案

qiuzhf

02-25

3270

一、先上解决方案：移动端适配我采用淘宝的一套rem解决方案源码： https://github.com/amfe/lib-flexible 1、安装 npm i -S amfe-flexible 2、引入meta标签 &amp;amp;amp;amp;amp;lt;meta name=&amp;amp;amp;amp;quot;viewport&amp;amp;amp;amp;quot; content=&amp;amp;amp;amp;quot;width=device

mpvue加载默认图片

xm_law的博客

12-12

2113

多张图片加载默认图片错误写法: &lt;img :src="item.NEWS_THUMB_IMG" binderror="errorfn(index)" alt=""&gt; methods:{ errorfn(index){ this.list[index].NEWS_THUMB_IMG="../../images/dy_pic01.png" ...

mpvue踩坑记

weixin_43743956的博客

12-04

678

1.在安卓手机下，应用vant的picker组建和mpvue进行开发组件

vue中rem自适应布局 -- lib-flexible && px2rem-loader

yumihe

08-17

1550

(1)安装插件lib-flexible &amp;&amp; px2rem-loader npm install lib-flexible px2rem-loader --save (2)在build目录下找到utils.js 在cssLoaders里增加: const px2remLoader = { loader: 'px2rem-loader', ...

【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!

dianzongliao7933的博客

02-06

1万+

所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。 data类型的Url格式早...

微信小程序Image图片实现width宽度100%，height高度自适应（解决图片变形问题）

美奇软件开发工作室

10-21

3193

第一步：wxss样式设置宽度为100% /* pages/user/user.wxss */ .img{ width: 100%; } 第二步：<image/>标签上，添加属性mode="widthFix"  <image class="img" src="../../images/bg.png" ...