Merge pull request #92 from ojvribeiro/fix-image-lighthouse

feat(core): better SEO for images and package playground

.gitignore

@@ -1,4 +1,3 @@
 node_modules
 package-lock.json
 yarn.lock
-demo

.npmignore

@@ -1 +1,3 @@
 .github
+webpack.mix.js
+demo

demo/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+_dist

demo/app.vue

@@ -0,0 +1,3 @@
+<template>
+ <VulmixWelcome />
+</template>

demo/assets/sass/main.scss

@@ -0,0 +1,4 @@
+html,
+body {
+ height: 100%;
+}

package.json

@@ -6,7 +6,7 @@
  "scripts": {
  "dev": "mix watch --hot",
  "prod": "mix --production",
- "serve": "npx http-server -p 8000 -a localhost _dist --gzip --proxy http://localhost:8000?"
+ "serve": "npx http-server -p 8000 -a localhost demo/_dist --gzip --proxy http://localhost:8000?"
  },
  "author": "Victor Ribeiro",
  "license": "MIT",

src/assets/sass/utils/index.scss

@@ -1,2 +1 @@
 @import "mixins";
-@import "functions";

src/components/Image.vue

@@ -1,28 +1,22 @@
 <template>
  <img
  :src="imgSrc"
- :alt="props.alt"
- :title="props.title"
+ :alt="props.alt ? props.alt : ''"
+ :title="props.title ? props.title : ''"
  :loading="targetIsVisible ? 'eager' : 'lazy'"
  ref="imageEl"
  />
 </template>
 
 <script setup>
  import { ref, onMounted } from 'vue'
- import { useElementSize, useElementVisibility } from '@vueuse/core'
+ import { useElementVisibility } from '@vueuse/core'
 
  const props = defineProps({
  src: {
  type: String,
  default: '',
  },
- width: {
- type: String,
- },
- height: {
- type: String,
- },
  alt: {
  type: String,
  default: 'Image',
@@ -35,57 +29,35 @@
  type: String,
  default: 'true',
  },
- original: {
- type: String,
- default: 'false',
- },
  })
 
  const imageEl = ref(null)
  const imgSrc = ref(props.src)
 
- const { width, height } = useElementSize(imageEl)
  const targetIsVisible = useElementVisibility(imageEl)
 
  const _image = new Image()
  _image.src = props.src.replace(
  /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
- `/assets/img/$1$2@50.${props.webp === 'true' ? 'webp' : '$3'}`
+ `/assets/img/$1$2.${props.webp === 'true' ? 'webp' : '$3'}`
  )
 
  imgSrc.value = _image.src
 
  onMounted(() => {
- function replace(size) {
- _image.onload = function () {
- if (props.original === 'false') {
- imgSrc.value = props.src.replace(
- /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
- `/assets/img/$1$2@${size}.${
- props.webp === 'true' ? 'webp' : '$3'
- }`
- )
- } else {
- imgSrc.value = props.src.replace(
- /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
- `/assets/img/$1$2.${
- props.webp === 'true' ? 'webp' : '$3'
- }`
- )
- }
- }
- }
-
- if (imageEl.value.width < 300) {
- replace('300')
- } else if (imageEl.value.width >= 300 && imageEl.value.width < 600) {
- replace('600')
- } else if (imageEl.value.width >= 601 && imageEl.value.width < 900) {
- replace('900')
- } else if (imageEl.value.width >= 901 && imageEl.value.width < 1200) {
- replace('1200')
- } else {
- replace('1920')
+ _image.onload = function () {
+ imgSrc.value = props.src.replace(
+ /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
+ `/assets/img/$1$2.${props.webp === 'true' ? 'webp' : '$3'}`
+ )
  }
  })
 </script>
+
+<style scoped>
+ img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ }
+</style>