DEV Community

Cover image for How to pass dynamic image url in nuxt project . Ultimate Guide .
Dimer Bwimba
Dimer Bwimba

Posted on • Edited on

How to pass dynamic image url in nuxt project . Ultimate Guide .

As the src properties will replaced by Webpack, you could do require function like this 

<templae>
  <div>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      default: ''
    }
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

*ParentComponent.vue 

<template>
  <ChildComponentExample :image-url="require('~/assets/myimage.png')" />
</template>
Enter fullscreen mode Exit fullscreen mode

This blog post explains how this works .:) Happy Code :)

Top comments (0)

Read next

blamsa0mine profile image

🚀 Upload d'images à partir d'une URL dans Laravel

A0mineTV -

anooppatel profile image

Mood Driven Theme Changer

Anoop Patel -

hemsoun_liskit_6b5e83c87b profile image

Hello Buddy

Hemsoun Liskit -

amirtds profile image

Advanced Open edX Monitoring with AppSignal for Python

AMIR TADRISI -