使用vue-cropper显示NaN*NaN

最新推荐文章于 2023-07-07 17:58:06 发布
最新推荐文章于 2023-07-07 17:58:06 发布
阅读量796 收藏
点赞数
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_wpno1/article/details/107953020
版权

使用vue-cropper不显示图片的问题

根据项目需求在图片上传之前按比例裁剪图片，项目运用了vue组件开发，于是在网上搜索了相关截图插件，然后选择了vue-cropper，文档比较清晰

其实使用了vue-cropper一段时间了，之前按照简书的例子写了，但是图片显示不出来，显示NaN*NaN，之前稀里糊涂的解决了问题，但是没做笔记，这次有遇到同样的问题，给组件绑定realTime函数打印出的数据显示img的preserve-3d相关css样式异常，所以才定位到是不是样式的问题。之后给包裹vue-cropper的容器定义高度图片就正常显示了。

csdn_wpno1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
写在前面 小记，就简单写了 。问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑vue.config.js，如下： let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/':'' } }; module.exp
vueCropper图片跨域导致图片不回显
最新发布
weixin_70075469的博客
01-23 751
控制台报错 图片回显出错 可能是跨域。
微信网页vue-cropper剪裁图片及其Android 端无法显示问题
心花怒放开到荼蘼
10-13 1144
1. 问题描述 Vue 框架的微信网页，需要在微信体系下剪裁图片，使用[vue-cropper](https://github.com/xyxiao001/vue-cropper)来实现，
VUE中使用vue-cropper实现图片裁剪，及问题总结
weixin_69580737的博客
07-07 6833
template><el-dialogtitle="裁切封面"/></div></div>--预览效果图--></div></div></div><el-button icon="el-icon-plus" @click="scaleBigger">放大</el-button><el-button icon="el-icon-minus" @click="scaleSmaller">缩小</el-button>
vue图片不显示
liujingfei1的博客
04-12 6731
vue中，加载稍微大点的图片，本地测试没问题，打包后不显示。 1、检查图片是否存在； 2、检查图片引入方式是否正确 import或者require引入 3、图片编码后太大，超过默认设置，需要在 webpack.base.conf.js文件中修改限制。 ...
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
vue-cropper 使用demo。 基于 vue3，实现 旋转，缩放，控制裁剪，选择阈值，上传图片等功能。
03-18
使用 vue-cropper + vue3 + typescript + element-plus 1. 主要组件 vue-cropper 2. ui组件基于element-plus 3. 开发框架 基于vue 3.2
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
04-29
vue3.2 基于vue-cropper 图片裁剪 实现裁剪 上传OSS
vue-cropper：一个用于vue的简单图片剪辑插件
02-03
import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) cdn方式使用 [removed][removed] Vue.use(window['vue-...
解决vue页面上显示NAN的问题:使用时间格式化插件moment.js
与其临渊羡鱼，不如进而结网。
09-10 7452
目录 今天在调试一个vue项目时，遇到这样的问题，如下图： 那怎么解决呢？使用moment.js插件。步骤如下： 第一：在项目中，新建moment.js，再把http://momentjs.cn/downloads/moment.js的代码放进去； 第二：在.vue文件中，引入插件moment 第三：在.vue文件 第åï¼Âå¨.vueæ件æç­¾éï¼åæåéè½...
VUE解决背景图片没有铺满的问题
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-05 6186
我刚下载的VUE-cli框架，但是设置背景图片的时候发现，在App.vue文件中设置style的风格css即可，红色部分其实就是网上抄来的，这就是背景图片的设置 但是我又发现了，图片没有铺满。 类似图片中的这样，上面和左边都会留个缝隙。 我找了半天都没有找到，直到看到：解决vue背景无法铺满全屏的问题 - 简书 这个说的情况跟我一样，只不过它是在index.html，我的工程里都没有，但是一葫芦画瓢，我在App.vue文件添加上body即可： 发现一家解决了背景图片铺满的问题了。 ..
vue-cropper的使用出现的问题
寬真
10-18 1万+
问题：上次做论坛使用了vue-cropper，方便对用户上传的图片进行裁剪之类，但是由于两个来月没管这套代码，发现这个vue-cropper竟然出现了报错。待会要研究一下。 红色波浪线处提示如下： Argument of type '{name:string;components:{VueCropper:tyoeof 'vue-cropper';}}'if not assignable...
vue-cropper 截图组件踩坑记
热门推荐
hbjiankely的博客
12-26 1万+
安装 npm install --save vue-cropper 封装组件  &lt;template&gt; &lt;vueCropper height="562px" ref="cropper" :img="imgUrl" :outputSize="option.size" :outputType="option.outputType" :info=&
button url图片显示不出来_哼！Vue如何在图片上传前使用vue-cropper进行剪切
weixin_39609527的博客
11-25 408
首先package.json引入vue-croppernpm i vue-cropper -Dtemplate组件中加入上传表单，隐藏input表单，点击图片打开资源文件夹<然后继续在template组件中加入vue-cropper模块，vue-cropper包在弹窗中显示<!-- 图片剪切弹窗 --> <van-dialog v-m...
vue-cropper 图片裁剪 图片跨域问题
UnderIcon的博客
11-27 8702
vue-cropper是一个很好用的图片裁剪插件，目前在项目中用到了，图片上传后，是存储到阿里云的，等拿到后端反给的图片路径去渲染到页面时，会提示图片跨域。 解决方法： imgTrick(src) { const img = new Image() img.src = src img.crossOrigin = 'anonymous' retu...
上传图片截图预览控件不显示cropper.js 跨域问题
萧曳丶
11-01 2060
上传图片到图片服务器，因为域名不同，多以会有跨域问题。 No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://img.xxx.com’ is therefore not allowed access. 照看代码发现，cropper.js里面对图片的引用路径做了判断，给...
vue3使用vue-cropper
09-09
要在Vue 3中使用vue-cropper，首先你需要安装vue-cropper插件。你可以使用npm命令来安装它，具体的命令是： ``` npm install vue-cropper@next ``` 安装完成后，在你的Vue组件中引入vue-cropper的相关代码。你可以在VueCropper.ts文件中找到vue-cropper的代码，并将其引入到你的组件中。具体代码如下： ```javascript import 'vue-cropper/dist/index.css' import { VueCropper } from "vue-cropper"; export default { components: { VueCropper }, // 其他组件配置 } ``` 在你的Vue模板中，你可以使用`<vue-cropper>`标签来使用vue-cropper插件。你可以根据官方文档来配置和使用vue-cropper，实现图片裁剪的功能。 需要注意的是，为了正确地使用vue-cropper插件，你还需要在项目中引入所需的样式文件。通过引入`vue-cropper/dist/index.css`，你可以确保插件的样式能够正确地加载和应用到你的组件中。 综上所述，这是在Vue 3中使用vue-cropper的基本步骤。你可以根据你的具体需求和项目配置来进一步使用和定制vue-cropper插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值