mpvue图片资源踩坑

最新推荐文章于 2019-06-11 22:15:42 发布
最新推荐文章于 2019-06-11 22:15:42 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： mpvue 文章标签： mpvue 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZeX_ng/article/details/83039760
版权

mpvue图片资源踩坑

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

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

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

ZeX_ng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mpvue小程序以及微信直播踩坑总结
03-29
我是比较熟悉vue的语法，但是也犹豫过是用原生还是用mpvue，因为那时候原生小程序已经相当成熟而mpvue才刚出来（踩坑和填坑的前人还很少） 所以我学习了几天原生的框架和语法，果断选择了mpvue，真的是没有对比就...
mpvue小程序加载不出图片 Failed to load local image resource /images/xx.png
热门推荐
Github.com/liangfengbo
04-24 2万+
mpvue开发小程序时候，要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错： VM14878:2 Failed to load local image resource /images/bg.png the server responded with a status of
mpvue写微信小程序-图片引入（一）
g2526的博客
11-08 4365
1、快速上手（http://mpvue.com/mpvue/quickstart/）       按官网给出流程，创建：         运行后，在微信工具查看： 编辑器中查看目录结构： 为了运行的话  这个项目算是完结，但是在想写自己的项目又遇到了问题。 2、实际操作 引用图片 原来写过的小程序，所以一开始我是把图片文件夹放在pages文件夹同级，然后调用爆出这个问题： ...
vue背景图片资源加载问题
wkNote
05-07 9405
主要问题： 通过img的src加载图片可以加载出来，但是通过css用图片做背景时发现加载不出来 问题代码： <template> <div id="app"> <!--无法加载--> <!--<div style="background:url('./assets/flower.jpg'); height:200px; ...
mpvue中动态渲染img的src属性初次渲染加载本地图片没有显示
kfgauss的博客
06-11 3056
<div class="userinfo" @click="login"> <img :src="userinfo.avatarUrl" alt=""> <p>{{userinfo.nickName}}</p> </div> export default { data () { re...
mpvue图片上传
FarmanKKK的博客
10-17 6191
mpvue小程序项目中的图片上传 效果图 通过mpvue文档得知他使用的是小程序原生api中的图片选择（wx.chooseImage）和文件上传（wx.uploadFile），因此我们直接根据小程序的文档来使用就可以了。 chooseImage文档 图片选择 我将备注写在代码块里，比较好说 chooseImage(e) { let i = 0; // 多图上传时使用到的in...
mpvue开发音频类小程序踩坑和建议详解
10-17
【mpvue 开发音频类小程序踩坑和建议详解】 在开发微信小程序的音频类应用时，选择使用mpvue框架可以带来一定的便利性，因为它允许使用Vue.js语法进行开发，这有助于提升开发效率。然而，初次接触mpvue和微信小程序...
详解基于mpvue微信小程序下载远程图片到本地解决思路
10-16
总结，基于mpvue的微信小程序下载远程图片到本地的流程主要包括获取图片URL、检查及获取图片临时路径、保存图片到本地这三个步骤。通过合理封装和错误处理，可以创建一个稳定且用户友好的下载功能。需要注意的是，...
mpvue_study.rar
05-17
"mpvue_study"项目中，我们能看到标准的MPVue项目结构，包括`pages`目录（存放页面组件）、`static`目录（存放静态资源）、`components`目录（存放可复用组件）、`common`目录（存放公共模块）以及`main.js`（入口...
mpvue开发微信小程序上传图片（附后端代码）（含城市联动，多项选择功能代码全）
boy火巨的博客
05-15 2267
小程序也是可以上传图片的，微信小程序文档也写的很清楚。 先看效果图GIF 上传图片 通过wx.chooseImage(OBJECT)实现 官方示例代码 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType...
vue项目图片路径样式拼接
七七呀
03-13 7911
  正常的vue项目图片路径格式：后来需要根据下图表格更改成带问号判断的路径：操作：将问号后面的部分用加号和引号拼接在原有的img路径后面，如果直接把问号后面的部分黏贴在路径后面是会报错的正确拼接如下：最后：直接浏览器检查图片路径即可看到拼接结果：over...
上传图片并进行图片的预览效果（基于两种实现：vue和小程序）
Seeyoucm
01-13 1466
因为实际的需求，使用vue的input组件，设置type=“file”，进行实现文件上传，并进行图片的预览，点击图片可进行删除操作 因为input组件原本的自身样式并没有办法与我设计图温和，所以在进行对input组件的宽高等处理后，通过定位的方式，将input组件至于最上层，并且设置opacity:0;达成最终的ui效果（具体的实现效果如下图） （vue）页面布局 &amp;lt;div cla...
微信小程序选择图片和预览图片
yanxiaosa的博客
05-31 2万+
作者>:燕潇洒 视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.wx.chooseImage此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null },首先在数据中定义接收数据的变量，然后调用方法选择图片，将图片显示出来。bindViewTap:function(){ var that = this; wx.c
【vue】关于图片路径动态化的问题
z767327552的专栏
06-18 1207
&amp;lt;img :src='url'&amp;gt;此处需要url需要返回一个asset下的一张图片路径，而图片名称则是根据id生成的图片名称，这样即可解决:src绑定图片途径的问题。 imgSrc() { if (this.userid !== "") { const url = require(`@/assets/${this.userid}.jpg`); ...
图片上传路径问题处理
CsbLanca
03-27 1709
图片上传路径相关问题 点击添加,弹出页面 前台jsp页面代码: **添加按钮,注册事件,以及按钮组** /* data-method="add"*/ <div id="gridToolBar" style="height:auto"> <div style="margin-bottom:5px"> <a href="javascript:;" d...
vue移动端rem适配--附带引入第三方库解决方案
qiuzhf
02-25 3107
一、先上解决方案： 移动端适配我采用淘宝的一套rem解决方案 源码： https://github.com/amfe/lib-flexible 1、安装 npm i -S amfe-flexible 2、引入meta标签 &amp;amp;amp;amp;amp;amp;lt;meta name=&amp;amp;amp;amp;amp;quot;viewport&amp;amp;amp;amp;amp;quot; content=&amp;amp;amp;amp;amp;quot;width=device
mpvue selector
最新发布
08-20
Mpvue 是一个基于 Vue.js 的小程序开发框架，它提供了一套类似 Vue.js 的 API 来开发小程序。在 Mpvue 中，你可以使用 `selector` 来选择页面中的元素。 在 Mpvue 中，使用选择器 `selector` 来选择页面中的元素有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值