官方 a-image 组件
组件文档：https://2x.antdv.com/components/image-cn
因为vue版本和antdv版本的关系，在 vue-antd-pro 3.0.2 的环境下（ant-design-vue@1.7.6、vue@2.6.0）无法直接使用，但我们可以选择第三方的组件（v-viewer）来实现类似的效果。当然，如果你使用的是最新版的 antdv，应该是可以直接使用官方组件的，但或许你在实际项目中 antdv 的版本已经锁定老版本，且不便升级，使用第三方预览组件是更好的选择。
引入 v-viewer@1.5.1
在 antdv 中引入 v-viewer（注意版本：1.5.1）
v-viewer：https://www.npmjs.com/package/v-viewer
1
yarn add v-viewer@1.5.1
➜ antd-demo git:(main) yarn add v-viewer@1.5.1
yarn add v1.22.17
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ v-viewer@1.5.1
info All dependencies
├─ throttle-debounce@2.3.0
├─ v-viewer@1.5.1
└─ viewerjs@1.10.5
✨ Done in 6.96s.
在src/main.js中引入 v-viewer
1
2
3
4
5
6
// 图片预览 注意版本 1.5.1
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
// 引入图片预览
Vue.use(Viewer, { name: 'v-viewer' })
文件中的位置参考：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ...
import './global.less' // global style
+ // 图片预览
+ import 'viewerjs/dist/viewer.css'
+ import Viewer from 'v-viewer'
Vue.config.productionTip = false
// mount axios to `Vue.$http` and `this.$http`
Vue.use(VueAxios)
+ // 引入图片预览
+ Vue.use(Viewer, { name: 'v-viewer' })
// ...
在页面中直接使用
1
2
3
<viewer v-viewer="{toolbar: false}">
<img src="~@/assets/car.png" class="car-img" alt="car">
</viewer>
在 github antd-demo 中查看
软件版本：vue-antd-pro 3.0.2
- “ant-design-vue”: “^1.7.6”
- “vue”: “^2.6.0”,
