Nuxt•3w ago

Import a list of images from public folder

the folder public/images has 9 images that I need to use in my script setup function. I don't wish to import all 9 images separately, can I import the entire folder?

10 Replies

kapa.ai•3w ago

Hi @NightFuries. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To import multiple images from the public/images folder in Nuxt 3, you don't actually need to import them in the traditional sense. The public directory in Nuxt is used to serve static assets directly, and its contents are accessible at the root URL of your application. Here's how you can handle this situation: 1. Place your images in the public/images folder. 2. In your component, you can create an array of image paths like this:

<script setup>
const imagePaths = Array.from({ length: 9 }, (_, i) => `/images/image${i + 1}.jpg`)
</script>

<script setup>
const imagePaths = Array.from({ length: 9 }, (_, i) => `/images/image${i + 1}.jpg`)
</script>

This assumes your images are named image1.jpg, image2.jpg, etc. Adjust the naming pattern if necessary. 3. You can then use these paths in your template:

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="path" alt="Image" />
  </div>
</template>

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="path" alt="Image" />
  </div>
</template>

This approach doesn't require you to import the images explicitly. Instead, it leverages Nuxt's handling of the public directory. Remember that files in the public directory are served as-is and are not processed by the build tools. This is suitable for static assets that don't need processing. For more information on how Nuxt handles static assets, you can refer to the Nuxt documentation on the public directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@711113525023735809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NightFuriesOP•3w ago

@kapa.ai the array don't work in dev mode since the image paths are not translated.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. You're right that the approach I suggested might not work as expected in development mode due to how Nuxt handles asset paths. Let's address this issue with a more appropriate solution for Nuxt 3. In Nuxt 3, when dealing with assets in the public folder, it's recommended to use the useAsset composable or the ~ alias. Here's a corrected approach that should work in both development and production modes:

<script setup>
import { useAssets } from '#imports'

const imageFiles = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  'image4.jpg',
  'image5.jpg',
  'image6.jpg',
  'image7.jpg',
  'image8.jpg',
  'image9.jpg'
]

const imagePaths = imageFiles.map(file => useAssets(`/images/${file}`))
</script>

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="path" alt="Image" />
  </div>
</template>

<script setup>
import { useAssets } from '#imports'

const imageFiles = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  'image4.jpg',
  'image5.jpg',
  'image6.jpg',
  'image7.jpg',
  'image8.jpg',
  'image9.jpg'
]

const imagePaths = imageFiles.map(file => useAssets(`/images/${file}`))
</script>

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="path" alt="Image" />
  </div>
</template>

This approach uses the useAssets composable, which is part of Nuxt 3's auto-imports feature. It will correctly resolve the paths for your images in both development and production environments. If you prefer not to use the composable, you can also use the ~ alias:

<script setup>
const imageFiles = [
  'image1.jpg',
  'image2.jpg',
  // ... other image files
]

const imagePaths = imageFiles.map(file => `/images/${file}`)
</script>

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="`~${path}`" alt="Image" />
  </div>
</template>

<script setup>
const imageFiles = [
  'image1.jpg',
  'image2.jpg',
  // ... other image files
]

const imagePaths = imageFiles.map(file => `/images/${file}`)
</script>

<template>
  <div v-for="path in imagePaths" :key="path">
    <img :src="`~${path}`" alt="Image" />
  </div>
</template>

In this case, we use the ~ alias in the template to ensure proper path resolution. These methods should work correctly in both development and production modes. For more information on handling assets in Nuxt 3, you can refer to the Nuxt documentation on assets. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@711113525023735809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

manniL•3w ago

why import? can't you just do <img src="/path-to-file" />

NightFuriesOP•3w ago

I am using matter.js. You can find that at https://ichack.org in the right box. So we have 7 svg images in the public directory and we are executing the matter.js code in the client, i.e. inside onMounted callback. The (very horrible) code to add images looks like this:

const config = useRuntimeConfig();
const urlPrefix = config.public.URLPrefix;
const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `${urlPrefix}/images/${s}.png`);
for (const sprite of sprites) {
  Composite.add(
    engine.world,
    Bodies.rectangle(Math.min(75 + offs, width - 75), 50, 100, 100, {
      render: {
        sprite: {
          texture: sprite, // <-- added here
          xScale: 1,
          yScale: 1
        }
      }
    })
  );  
}

const config = useRuntimeConfig();
const urlPrefix = config.public.URLPrefix;
const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `${urlPrefix}/images/${s}.png`);
for (const sprite of sprites) {
  Composite.add(
    engine.world,
    Bodies.rectangle(Math.min(75 + offs, width - 75), 50, 100, 100, {
      render: {
        sprite: {
          texture: sprite, // <-- added here
          xScale: 1,
          yScale: 1
        }
      }
    })
  );  
}

The problem here is, we can't use do:

const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `/images/${s}.png`);

const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `/images/${s}.png`);

code by @liabru

Matter.js

Matter.js is 2D rigid body physics engine for the web, using JavaScript and HTML5

IC Hack '25

Europe's largest student-run hackathon at Imperial College London

NightFuriesOP•3w ago

So we are feeding the images into a library, not to the image tag. The import option is

import sprite1 from '/images/1.png';
import sprite2 from '/images/2.png';
import sprite3 from '/images/3.png';
import sprite4 from '/images/4.png';
import sprite5 from '/images/5.png';
// ...

// and we also have separate sprite for mobiles (smaller versions)
import spriteXS1 from '/xs-images/1.png';
import spriteXS2 from '/xs-images/2.png';
import spriteXS3 from '/xs-images/3.png';
import spriteXS4 from '/xs-images/4.png';
import spriteXS5 from '/xs-images/5.png';
// ...

// and then gather them together:
const sprites = isMobileScreen() ? [spriteXS1, spriteXS2, /* ... */] : [sprite1, sprite2, /* ... */]

import sprite1 from '/images/1.png';
import sprite2 from '/images/2.png';
import sprite3 from '/images/3.png';
import sprite4 from '/images/4.png';
import sprite5 from '/images/5.png';
// ...

// and we also have separate sprite for mobiles (smaller versions)
import spriteXS1 from '/xs-images/1.png';
import spriteXS2 from '/xs-images/2.png';
import spriteXS3 from '/xs-images/3.png';
import spriteXS4 from '/xs-images/4.png';
import spriteXS5 from '/xs-images/5.png';
// ...

// and then gather them together:
const sprites = isMobileScreen() ? [spriteXS1, spriteXS2, /* ... */] : [sprite1, sprite2, /* ... */]

Am I making sense here? Is there a better way?

manniL•3w ago

ohh, I see. Maybe you could make a fetch call to download the images and use them, or try the glob way with https://www.lichter.io/articles/nuxt3-vue3-dynamic-images/

www.lichter.io

Vue 3: How to load dynamic images

With the release of Vue 3, a lot of things became easier. Unfortunately, loading dynamic assets such as images is not one of them. In the following article, I want to demystify the process of dynamic asset loading in Vue 3 or Nuxt 3 and explain why static assets can be loaded easily...

NightFuriesOP•3w ago

Yess this works brilliantly! Nuxt is great

Gaming

Programming

Import a list of images from public folder

Did you find this page helpful?