Vue图片查看器vue-preview的使用方法以及图片不显示问题的解决

    选择打赏方式

新功能!微信搜索Yi-Yi-Tu关注公众号【伊伊兔】回复电影名称就可以在线观影了!无广告免费观看全网影视!

第一步,下载插件

npm i vue-preview -S


第二部,安装配置

import VuePreview from 'vue-preview'

Vue.use(VuePreview)


第三部,使用方法:

这里先看官方demo的图片:

slides绑定的slide1一共有6个属性,其中src,msrc以及w,h是一定要给的,不给就空白或者报错

@close可以删除


vue-preview

我这里用360图片api

http://wallpaper.apc.360.cn/index.php?c=WallPaper&a=getAppsByOrder&order=create_time&start=0&count=10&from=360chrome 


做例子,axios拿到的数据筛选后得到data,先不要看我created里写的。

UC截图20190111202126.pngUC截图20190111201439.png

所以在完成第一步,第二部后使用直接在你要循环data这个数组的地方这样写,slides绑定的就是那个数组对象

<vue-preview class="preview" :slides="data"></vue-preview>

加个class是方便在全局css中调整图片这样完全可以替代

    <ul>
      <li v-for="img in imgs" :key="img.id">
        <img :src="img.url" alt="">
      </li>
    </ul>

原本的遍历方式。

由于data里没有src,msrc以及w,h这些属性,但我之前说了,这些是必须的,你再回过头看上面那张黑色的图片这个部分

          this.data.forEach(img => {

            img.msrc = img.src = img.url
            img.w = 800
            img.h = 500
            console.log(img.src)
          }

在网络请求的时候便forEach遍历data,

让data没有而插件vue-preview需要的src,msrc等于data里每个对象里的url也就是图片链接

搞定src和msrc后在给他设定w,h的值,就是点击图片查看时的图片大小,这样就搞定了!


版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:Vue图片查看器vue-preview的使用方法以及图片不显示问题的解决 https://www.zcjun.com/learn/333.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!