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

最新推荐文章于 2024-03-31 09:30:55 发布

cikifuture

最新推荐文章于 2024-03-31 09:30:55 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/cikifuture/article/details/123495947

版权

在使用vue-piczoom组件时遇到图片无法显示的故障，问题源于URL固定。通过将URL改为动态绑定成功解决了这个问题。详细解决步骤可参考github上的vue-piczoom项目。

摘要由CSDN通过智能技术生成

vue-piczoom的使用可参照 readme
github地址 https://github.com/826327700/vue-piczoom

我碰到的问题是 url固定但图片没有显示出来

<div class="pic-box"> <!--pic-box:width:500px;height:500px-->
     <pic-zoom url="../assets/img/a.png" :scale="3"></pic-zoom>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cikifuture

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

VUE类淘宝放大镜组件-vue-piczoom使用

qq_29695371的博客

03-26

1029

参考资料 https://www.npmjs.com/package/vue-piczoom 安装 npm install vue-piczoom --save //or npm install vue-piczoom --save --registry=https://registry.npm.taobao.org

Vue - 图片放大镜（vue-piczoom）

技术共享，共同进步！

10-28

3210

图片放大镜（vue-piczoom）

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

Vue-PicZoom：一款优雅的图片缩放组件

最新发布

gitblog_00058的博客

03-31

806

Vue-PicZoom：一款优雅的图片缩放组件项目地址:https://gitcode.com/826327700/vue-piczoom Vue-PicZoom 是一个基于 Vue.js 的轻量级图片缩放插件，专为提升用户体验而设计，特别是在需要查看详细图像信息的场景中。它允许用户通过简单的手势或者鼠标操作来放大和缩小图片，使得在网页上查看细节变得简单易行。技术解析 Vue-PicZoom ...

vue-piczoom放大镜插件

QLF19的博客

08-11

760

放大镜

vue-piczoom

weixin_33947521的博客

12-28

1077

A picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件Build Setup 使用步骤# 安装 install npm install vue-piczoom --save复制代码# 使用 use --script import PicZoom from 'vue-piczoom' export default { nam...

vue-cli安装后使用vue -V命令找不到版本的问题

weixin_43403746的博客

05-07

8319

很久没有初始化vue项目了，今天突然有需求，于是准备使用vue-cli来初始化。 node已经配置好了环境变量，开始安装。 npm install -g vue-cli 这里遇到了一个小插曲，node放在D盘的，npm安装时一直提示权限不足，解决方案如下： 1.先在cmd中使用“where node”命令得到node所在的目录 2.进入该目录，右击后发现“删除”和“重命名”前面都存在黄色盾牌，就代表权限不足。选择文件后右击进入“属性”→“安全”→“编辑”，在“组或用户名(G)”中选择自己的账号，在下面

基于vue2.x的电商图片放大镜插件的使用

08-28

1. 安装插件：使用 npm install vue-piczoom --save 命令安装插件。 2. 引入组件：在 Vue 组件中引入插件，例如：import PicZoom from 'vue-piczoom'。 3. 使用组件：使用插件提供的组件，例如：<pic-zoom url=...

使用vue-cropper时，展示oss图片出现跨域问题解决

IceStreamLab

01-17

8469

<vue-cropper ref="cropper" id="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCr...

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

zhouwangling_的专栏

11-08

6389

工作中经常会遇到各种各样的浏览器，于是自己查阅了些资料，整理了下各种浏览器的内核，便于大家查阅！浏览器用的内核，一般不外乎微软的IE 内核和webkit内核。所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都是要用到时再调入内存并执行的。webkit内核更小巧快速，但兼容性不如IE内核。所以有些浏览器是用的双内核，可以在高速模式和兼容模式间切换。 1、Trident内核

08-08

01-28

大把小米的博客

05-28

450

在Vue项目中动态绑定图片的src属性，图片会显示不出来 <div class="share-header__logo"> <img :src="appInfo.headUrl" alt=""> <span>美谈美语</span> </div> data() { return { headUrl: "../../../public/resources/images/logo/logo-mei.png

Vue中使用图片放大镜插件 vue-piczoom

weixin_42571728的博客

11-04

1325

图片放大镜插件 vue-piczoom 1.安装 npm install vue-piczoom -S 2.在组件内使用 <template> <div style="width: 400px;height: 400px"> <pic-zoom url="../../static/img/photo-da/photo_rule.png" :scale="1.5"></pic-zoom> </div> <d

淘宝放大镜插件（vue-piczoom）

WebDestiny的博客

09-19

3091

Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save # 使用 use --script import PicZoom from 'vue-piczoom' export default { name: 'App', components: { PicZoom } } --html <pic-z...

picgo 上传成功，无法显示图片

yujianf的博客

05-24

3778

picgo + 腾讯云踩坑记录将图片上传云端，方便访问，在安装时遇到到了一些问题，在这里记录解决的办法。首先我的使用场景是 typora ，将图片上传云端，便于访问。typora 的新版本才支持将复制来的图片直接通过 picgo 上传放到腾讯云。踩坑点： picgo 路径不对上传成功却无法访问图片，我这里的原因是以为域名可以自己定义，其实域名还是要自己另外去申请的，所以用默认的就好了。我这里的原因是以为域名可以自己定义，其实域名还是要自己另外去申请的，所以用默认的就

vue-piczoom 基于vue2.x的电商图片放大镜插件

smile_or的博客

02-22

1257

vue-piczoom 基于vue2.x的电商图片放大镜插件使用步骤 #安装 install npm install vue-piczoom --save // 使用 import PicZoom from 'vue-piczoom' export default { name: 'App', components: { PicZoom } //html代码 &lt;p...

vue仿淘宝放大镜插件 vue-piczoom的使用问题

qimingxing1306的博客

12-22

2371

vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom–save //下载放大镜插件 vue-piczoom插件下载报错 Module build failed (from ./node_modules/postcss-loader/lib/index.js): Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-import’ 这是版本不兼容的问题可能是作者忘记做兼容了所以我们要按版

《第一行代码》ChoosePicTest例子从相册读取照片显示失败

qq_14823565的博客

01-19

1577

最近在学Android，在编写《第一行代码》从相册中选取的图片例子的时候，发现相片读取失败。解决方法如下：

怎么在el-image中插入vue-piczoom

05-20

要在 `el-image` 中使用 `vue-piczoom`，可以按照以下步骤操作： 1. 安装 `vue-piczoom`：可以使用命令 `npm install vue-piczoom --save...这样就可以在 `el-image` 中使用 `vue-piczoom` 组件来实现图片缩放功能了。