-
Notifications
You must be signed in to change notification settings - Fork 253
/
index.vue
94 lines (84 loc) · 2.49 KB
/
index.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
<div>
<div class="container">
<h2>NuxtImg vs Img</h2>
<pre><img src="/images/damavand.jpg" width="200" height="auto"></pre>
<p>
<select v-model="src">
<option value="/images/damavand.jpg">
Damavand
</option>
<option value="/images/colors.jpg">
Colors
</option>
</select>
</p>
<div style="height:2000px;" />
<NuxtImg
ref="nuxtImg"
:src="src"
width="200"
height="100"
loading="lazy"
/>
<img ref="img" src="/images/damavand.jpg" width="200" height="100" loading="lazy">
<pre>{{ nuxtImgCode }}</pre>
<h2>SVG image from remote url</h2>
<NuxtImg src="https://nuxtjs.org/logos/nuxt.svg?foo=bar" width="400" height="400" />
<h2>JPEG image inside project</h2>
<NuxtImg responsive src="/images/damavand.jpg" />
<h2>JPEG image from remote url</h2>
<NuxtImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Aconcagua2016.jpg/600px-Aconcagua2016.jpg" />
<h2>PNG image on Cloudinary</h2>
<NuxtImg provider="cloudinary" src="/remote/nuxt-org/blog/going-full-static/main" />
<NuxtImg provider="cloudinary" src="/remote/nuxt-org/blog/going-full-static/main" width="200" height="200" fit="cropping" />
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main"
width="200"
height="200"
fit="thumbnail"
:operations="{ roundCorner: 'max' }"
/>
<h2>JPEG image on TwicPics</h2>
<NuxtImg provider="twicpics" src="/football.jpg" />
<NuxtImg
provider="twicpics"
src="/football.jpg"
width="250"
height="400"
:operations="{ focus: 'auto' }"
/>
<NuxtImg provider="twicpics" src="/football.jpg" width="100" height="100" quality="1" />
<h2>JPEG image on Fastly</h2>
<NuxtImg provider="fastly" src="/image.jpg" />
<h2>JPEG image on Imagekit</h2>
<NuxtImg provider="imagekit" src="/img/plant.jpeg" />
</p<select>
</div>
</div>
</template>
<script>
export default {
data () {
return {
nuxtImgCode: '',
src: '/images/damavand.jpg'
}
},
mounted () {
// this.nuxtImgCode = this.$refs.nuxtImg.$el.outerHTML
}
}
</script>
<style scoped>
.container {
text-align: center;
}
.container img {
max-width: 720px;
margin: 10px;
border: 2px white solid;
border-radius: 3px;
}
</style>