Nuxt/image in nuxt v2 laravel webp troubleshooting

Question

Thank you very much for support, i am new in nuxt.js v2 and laravel, I am having a problem converting jpg images to webp that are stored in backend laravel address, i am using nuxt.js version 2 with Laravel Framework 8.83.27. and i decided to use nuxt/image module according to this webpage: https://v0.image.nuxtjs.org/getting-started/installation In this way :

 <nuxt-img 
    format="webp"
      src="images/bride.jpg" 
      width="200" 
      height="500" 
      alt="Ejemplo de imagen"
    /> 

the conversion works perfectly showing an image in webp format named bride from /static/images/bride.jpg but this part is in frontend side, but when i try to show and convert images from laravel address it does not work. I make this way :

<nuxt-img 
   
         src="http://localhost/projectmarketstore/backend/public/storage/56.jpg" 
      width="300" 
      height="200" 
      alt="Ejemplo de imagen" 
      format="webp"
    />  

and it did not work, the image is showed but it is not converted to webp. This is my nuxt.config.js archive:

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en',
      class: 'dark',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/css/main.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  image: {

    // Configuración para usar IPX localmente y manejar imágenes remotas
 
    providers: {
  // Proveedor para imágenes servidas desde Laravel
  laravel: {
    provider: 'ipx',
    options: {
      baseURL: 'http://localhost/projectmarketstore/backend/public/storage/', // Enlace simbólico en Laravel
    },
  },
  ipx: {
    // IPX proporciona la funcionalidad para generar imágenes WebP
    dir: 'static',
    domains: ['localhost'], // Asegúrate de que las imágenes sean servidas desde el servidor correcto
  },
},
    format: ['webp'], // Agrega esta línea para priorizar WebP
  },

  auth:{
    strategies: {
      'laravelSanctum': {
        provider: 'laravel/sanctum',
        url: 'http://localhost:8000',
        endpoints:{
          login:{
            url:'/api/login', 
          }
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    postcss:{
      plugins:{
        tailwindcss:{},
        autoprefixer:{},
      },
    }, 
  },

  // Configuración del proxy y Axios
  axios: {
    proxy: true,
    credentials: true
  },
  proxy: {
    '/laravel': {
      target: 'https://laravel-auth.nuxtjs.app',
      pathRewrite: { '^/laravel': '/' }
    }
  }
}

i created a folder in laravel backend a symbolic link (storage link) in order to store images and the addresses are: C:\xampp\htdocs\projectmarketstore\backend\public\storage and C:\xampp\htdocs\projectmarketstore\backend\storage\app\public. this is my package.json archive:

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/auth-next": "5.0.0-1667386184.dfbbb54",
    "axios": "^0.21.1",
    "core-js": "^3.25.3",
    "ipx": "0.9.11",
    "nuxt": "^2.15.8",
    "sharp": "^0.33.5",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@nuxt/image": "^0.7.2",
    "autoprefixer": "^10.4.18",
    "postcss": "^8.4.36",
    "tailwindcss": "^3.4.1"
  }
}

and this is my cors.php archive in laravel side:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie', 'storage/*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:3000','http://127.0.0.1:3000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['Content-Type','X-Requested-With','Authorization','X-Auth-Token'],

    'max_age' => 0,

    'supports_credentials' => true,

];

Any help is appreciated i am blocked with this issue, thank you in advance

Answer 1

Try this. Its probably the Provider is not there.

<nuxt-img

  provider = "ipx"

  src="/56.jpg" 
  width="300" 
  height="200" 
  alt="Ejemplo de imagen" 
  format="webp"
/>