0

I want to make a component that gets a String prop with the name of the image

<script setup>
const props = defineProps({
      image: String,
    }
)

</script>

I tried using the required function as solution given in nuxt but this doesnt work in nuxt 3 and i cant find an alternative


<div class="col-4 h-100 text-center">
  <h1>Picture</h1>
  <img :src="require(`../assets/${image}.jpg`)" />
</div>

I only tried using a normal src attribute to test if it can find the image and that works.

Mathias Van Langendonck
  • 35
  • 1
  • 4
  • You can make a function that returns the image string, and if the string is empty or fail to load, returns an placeholder image. – Davi Oliveira Dec 04 '22 at 21:29
  • Using Vite or Webpack? – kissu Dec 04 '22 at 23:33
  • @kissu I'm using Vite – Mathias Van Langendonck Dec 05 '22 at 07:02
  • [This is](https://stackoverflow.com/a/71514878/8816585) the way to go. Be careful when using that one because you will need to have either `..` or `.` as your starting point as [mentioned here](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#imports-must-start-with--or-). – kissu Dec 05 '22 at 11:42
  • @mathias-van-langendonck check this : https://stackoverflow.com/questions/74762970/tilde-not-convert-to-absolute-path-when-use-it-dynamic/74763017#74763017 – sadeq shahmoradi Dec 11 '22 at 17:46

0 Answers0