1

I am having troubles getting Nuxt Image to process dynamic images. If I run it in development mode the code below works as intended but if I run nuxt generate to create a static site (intend to host on Netlify without 3rd party image providers) the images don't get processed. Does anybody know a workaround for this? It's going to be a very image-heavy static site and if I can't get it to work I will have to ditch Nuxt for something else, which I'd rather not. There's some github issues on this but none resolved so far..

  <masonry-wall :items="project.images">
    <template #default="{ item, index }">
      <nuxt-img
        :src="pathForImage(item.path)"
        :key="index"
        sizes="sm:100px md:500px lg:1000px"
      />
    </template>
  </masonry-wall>

with project referring to a markdown file I load with Nuxt Content that looks like

---
id: "project-id"
title: "project-title"
year: "2022"
images:
  - path: "image1.jpg"
  - path: "image2.jpg"
  - path: "image3.jpg"
  - path: "image4.jpg"
---
dan
  • 1,292
  • 2
  • 10
  • 16
  • What's the value of `pathForImage`?, is it a resolved value to the image path where your files are placed? – UdithIshara Feb 11 '22 at 04:04
  • @UdithIshara yes, it adds the path to the filename. pathForImage(filename) { return "images/" + this.project.id + "/" + filename; }, – dan Feb 11 '22 at 07:35
  • 1
    Check my answer to this post https://stackoverflow.com/questions/70970096/nuxt-displaying-images-using-markdown-it-relative-to-markdown-content/70975050#70975050 You'll have to "require" the images manually – UdithIshara Feb 11 '22 at 09:52
  • @UdithIshara Thanks, that does make a difference. Though it breaks the dev mode. And while it does copy the images now into _nuxt/img when I run generate it only copies them and adds a hash to the filename. All my processing settings get ignored. That's probably a nuxt-img problem though. – dan Mar 02 '22 at 10:01

0 Answers0