CODEWITHSUNDEEP
aws-lambdanuxt.js
vanminhquangtri
vanminhquangtri

Reputation: 335

How to fix NuxtImage not loaded in production

My app is:

My images is located at folder: src/public/images. The provider is IPX. Image is loaded perfect on localhost. But in production, image is not loaded without any error thrown.

What is tried is:

Change to @nuxt/image-edge: not work.

Create folder public at the root, then create folder images inside folder public then put all image inside this folder images: still not work.

Deploy on netlify instead of AWS: not work, same error happens.

If I use the external image url, it works perfect. So what I guess is, the deployment if NuxtImage somehow not able to render image. It just render the url.

I would love to receive any advice to solve this problem. Thank you.

Upvotes: 0

Views: 778

Answers (1)

dev-1603
dev-1603

Reputation: 1

nuxt image only reads from public folder once it is build. that part is correct of creating public folder at root so to read the images you need to add folder path i.e src="/images/[imagename]"

here is how i did to consume external and local images by creating a component on top of nuxt iamge // for local image from default folder

//local image from different folder

// for external or with provider 

< 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>

Upvotes: 0

Related Questions