Trouble loading images from relative paths in Nuxt.js 3

Question

I'm currently developing an application using Nuxt.js 3, and I have an array of objects that contains information about team members. Each object has a profil_path property that holds the relative path to a profile image.

I want to display these profile images in an img tag in my template, but I'm having trouble loading the images correctly.

When I use the :src="people.profil_path" syntax in the img tag, the images fail to load correctly. The URL of the displayed image in the browser's inspector is incorrect, and it uses the relative path instead of the absolute URL.

I tried using require, but Nuxt3 doesn't seem to appreciate it.

<template>
  <div class="card-box my-8 flex flex-wrap justify-between items-center px-4">
    <div v-for="people in team" :key="people.name" class="card m-auto mb-4 p-4 bg-white border rounded-md w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
      <img class="object-cover" :src="people.profil_path" :alt="`Photo of ${people.name}`">
      <p>{{ people.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      team: [
        {
          name: "John Doe",
          title: "",
          arts: "",
          palmares: "",
          profil_path: "@/assets/img/profil-placeholder.jpg"
        },
        // ... other team objects
      ]
    }
  }
}
</script>

Answer 1

So ultimately, the solution of using the public folder was a bit bothersome for me, and it also didn't work in production. Therefore, I went back to my assets folder and used regular imports for the images I want to display dynamically.

import placeholder from '@/assets/img/profil-placeholder.webp';
import johnDoeProfil from '@/assets/img/jdprofil.webp';