Skip to content

Commit

Permalink
legacy mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@farnabaz
farnabaz committed Sep 8, 2020
1 parent 0248768 commit 0c757a5
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 44 deletions.
57 changes: 57 additions & 0 deletions docs/content/en/nuxt-image.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: Props
description: ''
position: 4
category: Guide
---

# `src`

Path to image file. `src` sould be in form of absolute path and starts with `/`.

```vue
<template>
<nuxt-image :src="src" ... />
</template>
```

## `sets`

```vue
<template>
<!-- set prop of type array -->
<nuxt-image :sets="sets" ... />
<!-- simple string type but same functionality -->
<nuxt-image sets="300,300:600,600:900" ... />
<!-- | | | | | -->
<!--------- width -^ | | | | -->
<!-- | | | | -->
<!------- breakpoint --^ | | | -->
<!---------------- width --^ | | -->
<!-- | | -->
<!--------------- breakpoint --^ | -->
<!------------------------ width --^ -->
</template>
<script>
export default {
data() {
return {
sets: [
{
width: 300
},
{
breakpoint: 300,
width: 600
},
{
breakpoint: 600,
width: 900
}
]
}
}
}
</script>
```
7 changes: 5 additions & 2 deletions playground/nuxt.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
'@nuxtjs/tailwindcss'
],
image: {
defaultProvider: 'twicpics',
defaultProvider: 'local',
presets: [
{
name: 's50',
Expand All @@ -20,8 +20,11 @@ export default {
providers: {
local: {},
twicpics: {
baseURL: 'https://i5acur1u.twic.pics/',
baseURL: 'https://i5acur1u.twic.pics',
},
cloudinary: {
baseURL: 'https://res.cloudinary.com/farnabaz/image/upload',
}
}
}
}
Expand Down
90 changes: 68 additions & 22 deletions playground/pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,46 @@
<template>
<div>
<nuxt-image
src="local:/images/holly-pezant-FiwHZ935FLE-unsplash.jpg"
:width="300"
:height="400"
sets="300,410:600,800:900,900:1200"
/>
<nuxt-image
src="local+s50:/images/holly-pezant-FiwHZ935FLE-unsplash.jpg"
:width="50"
:height="50"
/>
<span>Photo by <a href="https://unsplash.com/@sequence_studio?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Holly Pezant</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

<nuxt-image
src="twicpics:/content/images/2018/08/best-of-sublime-text.jpg"
:width="700"
:height="370"
/>
<div class="flex flex-col">
<section>
<nuxt-image
src="/images/wolfgang-hasselmann-HQIcxyA4cYI-unsplash.jpg"
class="background-image"
sets="300,900:900,1280:1280"
>
</nuxt-image>
<div class="copyright">
<span>Photo by <a href="https://unsplash.com/@wolfgang_hasselmann?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Wolfgang Hasselmann</a> on <a href="https://unsplash.com/t/wallpapers?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
</div>
</section>
<div class="container mx-auto flex items-center py-32 flex-wrap">
<nuxt-image
src="/images/wolfgang-hasselmann-esicdctFse0-unsplash.jpg"
height="67%"
sets="640"
class="w-1/2"
/>

<nuxt-image
src="/images/max-harlynking-_c2on-QNXG0-unsplash.jpg"
height="67%"
sets="640"
class="w-1/2"
/>

<nuxt-image
src="/images/andre-lergier-MMS_CBu0ngM-unsplash.jpg"
sets="640"
height="67%"
class="w-1/2"
/>

<nuxt-image
src="/images/bela-bako-EMx_ih9FTwI-unsplash.jpg"
sets="640"
height="67%"
class="w-1/2"
/>

</div>
</div>
</template>

Expand All @@ -27,7 +50,30 @@ export default {
}
</script>

<style >
<style lang="scss">
body {
margin: 0;
a {
color: inherit;
}
}
section {
position: relative;
width: 100vw;
height: 100vh;
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.copyright {
position: absolute;
bottom: 0;
left: 0;
font-size: 0.8em;
color: white;
}
}
</style>
14 changes: 10 additions & 4 deletions src/runtime/components/nuxt-image.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
.__nuxt-image {
position: relative;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
}

.__nuxt-image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.__nuxt-image-rel {

.__nuxt-image-blur {
}
.__nuxt-image-rel.full {
width: 100%;
height: 100%;
}
.__nuxt-image-rel.blur {
filter: blur(25px);
transform: scale(1.1);
}

.__nuxt-image-original {
.__nuxt-image-abs {
opacity: 0;
transition: opacity 400ms ease 0ms;
}
.__nuxt-image-original.visible {
.__nuxt-image-abs.visible {
opacity: 1;
}
60 changes: 44 additions & 16 deletions src/runtime/components/nuxt-image.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import './nuxt-image.css'
import Vue from 'vue'

export default Vue.extend({
export default {
name: "NuxtImage",
props: {
src: {
Expand All @@ -10,12 +9,16 @@ export default Vue.extend({
required: true
},
width: {
type: Number,
default: -1
type: String,
default: ''
},
height: {
type: Number,
default: -1
type: String,
default: ''
},
legacy: {
type: Boolean,
default: false
},
alt: {
type: String,
Expand All @@ -35,7 +38,9 @@ export default Vue.extend({
}
},
async fetch() {
this.blurry = await this.$img.lqip(this.src)
if (!this.legacy) {
this.blurry = await this.$img.lqip(this.src)
}
},
mounted() {
this.$img.$observer.add(this.$el, () => {
Expand All @@ -58,7 +63,7 @@ export default Vue.extend({
}
})
}
if (!Array.isArray(sizes) || !sizes.length) {
if ((!Array.isArray(sizes) || !sizes.length) && !this.legacy) {
sizes = [{
width: this.width
}]
Expand All @@ -68,7 +73,10 @@ export default Vue.extend({
return sizes;
},
generatedSrc() {
return this.sizes[0].url
if (this.sizes.length) {
return this.sizes[0].url
}
return this.src
},
generatedSrcset() {
return this.sizes.map(({ width, url }) => `${url} ${width}w`).join(', ')
Expand All @@ -92,16 +100,19 @@ export default Vue.extend({
}
},
render(h) {
if (this.legacy) {
return this.renderNonOptimizedImage(h)
}
const bluryImage = h('img', {
class: '__nuxt-image-blur',
class: '__nuxt-image-rel full blur',
attrs: {
src: this.blurry,
alt: this.alt
}
})

const originalImage = h('img', {
class: ['__nuxt-image-original', this.loaded ? 'visible' : ''],
class: ['__nuxt-image-abs', this.loaded ? 'visible' : ''],
attrs: {
src: this.loading ? this.generatedSrc : undefined,
srcset: this.loading ? this.generatedSrcset : undefined,
Expand All @@ -120,21 +131,38 @@ export default Vue.extend({

const noScript = h('noscript', {
domProps: {
innerHTML: `<img class="__nuxt-image-original visible" src="${this.generatedSrc}" srcset="${this.generatedSrcset}" sizes="${this.generatedSizes}" width="${this.width}" height="${this.height}" alt="${this.alt}" >`
innerHTML: `<img class="__nuxt-image-abs visible" src="${this.generatedSrc}" srcset="${this.generatedSrcset}" sizes="${this.generatedSizes}" width="${this.width}" height="${this.height}" alt="${this.alt}" >`
}
}, [])

const placeholder = h('div', {
class: '___nuxt-image-pl',
style: {
paddingBottom: this.height ? `${this.height}` : undefined,
}
})

const wrapper = h('div', {
style: {
width: `${this.width}px`,
height: `${this.height}px`,
width: this.width ? `${this.width}px` : undefined
},
class: '__nuxt-image',
}, [bluryImage, originalImage, noScript])
}, [bluryImage, originalImage, noScript, placeholder])

return wrapper;
},
methods: {
renderNonOptimizedImage(h) {
return h('img', {
class: '__nuxt-image-original visible',
attrs: {
src: this.generatedSrc,
srcset: this.generatedSrcset,
sizes: this.generatedSizes,
alt: this.alt
}
})
},
generateSizedImage(width: number) {
return this.$img(this.src, {
width: width
Expand All @@ -144,4 +172,4 @@ export default Vue.extend({
this.loading = true
}
}
})
}

0 comments on commit 0c757a5

Please sign in to comment.