alina sireneva
dbaedf9933
Some checks failed
Tests / e2e (push) Blocked by required conditions
Tests / e2e-deno (push) Blocked by required conditions
Tests / test-deno (push) Successful in 1m46s
Tests / test-node (node22) (push) Successful in 1m59s
Tests / test-bun (push) Successful in 2m1s
Tests / test-node (node20) (push) Successful in 2m7s
Tests / test-node (node18) (push) Successful in 2m12s
Tests / test-web (chromium) (push) Successful in 2m5s
Build and deploy docs / build (push) Has been cancelled
Tests / test-web (firefox) (push) Has been cancelled
Tests / lint (push) Has been cancelled
Build and deploy typedoc / build (push) Has been cancelled
Co-authored-by: Kamilla 'ova <me@kamillaova.dev> Co-authored-by: Alina Chebakova <chebakov05@gmail.com> Co-authored-by: Kravets <57632712+kravetsone@users.noreply.github.com> Co-authored-by: starkow <hello@starkow.dev> Co-authored-by: sireneva <150665887+sireneva@users.noreply.github.com>
45 lines
895 B
Vue
Executable file
45 lines
895 B
Vue
Executable file
<template>
|
|
<p class="img-wrap">
|
|
<img
|
|
:src="src"
|
|
:alt="alt || caption"
|
|
:style="{'max-width': width ? width + 'px' : undefined}"
|
|
:class="{'img-adaptive': adaptive}"
|
|
>
|
|
<span v-if="caption">{{ caption || alt }}</span>
|
|
</p>
|
|
</template>
|
|
|
|
<script>
|
|
import mediumZoom from 'medium-zoom'
|
|
|
|
export default {
|
|
name: 'VImg',
|
|
props: ['src', 'alt', 'caption', 'width', 'adaptive'],
|
|
mounted() {
|
|
mediumZoom(this.$el.querySelector('img'), {
|
|
margin: 24,
|
|
background: 'var(--vp-backdrop-bg-color)',
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.img-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.img-wrap span {
|
|
margin-top: 4px;
|
|
font-size: 14px;
|
|
color: var(--vp-c-text-2);
|
|
}
|
|
|
|
.dark .img-adaptive {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|