Nuxt.js v2对接Laravel时Nuxt/image无法转远程图片为WebP问题排查

问题现象 #

• 本地/static/images目录下的JPG图片，使用以下代码可正常转为WebP格式：

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

• 加载Laravel后端storage目录的远程图片时，图片能正常显示，但无法转为WebP格式，使用代码：

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

当前配置 #

nuxt.config.js #

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': '/' }
    }
  }
}

package.json #

{
  "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"
  }
}

Laravel cors.php #

<?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,
];

解决方案 #

1. 显式指定图片提供者
   使用<nuxt-img>加载Laravel图片时，必须指定provider为你配置的laravel，并使用相对路径（基于baseURL）：

<nuxt-img 
  provider="laravel"
  src="56.jpg" 
  width="300" 
  height="200" 
  alt="Ejemplo de imagen" 
  format="webp"
/>  

2. 更新IPX的domains配置
   在nuxt.config.js的image.providers.ipx中，添加Laravel图片的完整域名路径，确保IPX可以处理该来源的图片：

ipx: {
  dir: 'static',
  domains: ['localhost', 'http://localhost/projectmarketstore/backend/public/storage/'],
},

3. 验证sharp依赖
   WebP转换依赖sharp库，若安装有问题，重新安装并确保版本兼容：

npm install sharp --force

4. 刷新Laravel配置缓存
   确保CORS配置生效，执行：

php artisan config:clear

内容的提问来源于stack exchange，提问作者omareliotorres