如何修复 NuxtImage 在生产中未加载的问题

Question

我的应用程序是：

• “nuxt”：“^3.6.5”，

• “@nuxt/image”：“^1.0.0-rc.1”，

• 构建命令：nuxt build

• ssr：正确

• 我的网站部署在AWS中。

我的图像位于文件夹：src/public/images。提供商是 IPX。 图像在本地主机上完美加载。但在生产中，图像不会加载而不会引发任何错误。

尝试的是：

更改为@nuxt/image-edge：不起作用。

在根目录创建文件夹 public，然后在文件夹 public 中创建文件夹 images，然后将所有图像放入该文件夹 images 中：仍然不起作用。

在 netlify 而不是 AWS 上部署：不起作用，会发生同样的错误。

如果我使用外部图像网址，效果非常好。 所以我的猜测是，如果 NuxtImage 不知何故无法渲染图像，则部署。它只是渲染 url。

我很乐意收到任何解决此问题的建议。谢谢你。

Answer 1

nuxt 映像仅在构建后从公共文件夹中读取。这部分在根目录下创建公用文件夹是正确的 因此要读取图像，您需要添加文件夹路径 即 src="/images/[imagename]"

这是我如何通过在 nuxt iamge 之上创建一个组件来使用外部和本地图像 // 对于默认文件夹中的本地图像

//不同文件夹中的本地图片

// 对于外部或与提供商一起

< script setup lang = "ts" >
  import {
    includes
  } from 'lodash';

const prop = defineProps({
    src: { type: String },
    alt: { type: String, default: '' },
    sizes: { type: String },
    srcset: { type: String },
    width: { type: String, default: '30px' },
    height: { type: String, default: '30px' },
    provider: { type: String },
    format: { type: String, default: 'webp' },
    title: { type: String, default: '' },

})

const getpath = computed(() => {
    let path: string | any = includes(prop.src, '/') ? prop.src : `/icons/${prop.src}`
    if (prop.provider) path = prop.src

    return path
  }) <
  /script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <nuxt-img loading="lazy" :provider="provider" :src="getpath" :width="width" :height="height" :modifiers="{ folder: 'goalList' }"  :alt="alt" />
</template>