Dynamically image binding vue

Question

I want to do the same as here but instead I want to use images.sample as parameter e.g props:['images.sample'],

<template>
<img :src="images.sample">
</template>

<script>
export default {
    data() {
        return {
            images: {
                sample: require('./assets/static/images/sample.jpg')
            }
        }
    }
}
</script>

Answer 1

Your child component should be like :

<template>
<img :src="url">
</template>

<script>
export default {
  name:'child-img',
   props:['url'],
    data() {
        return {

        }
    }
}
</script>

the parent component should have this content :

<template>
<child-img :url="images.sample"/>
</template>

<script>
export default {
    data() {
        return {
            images: {
                sample: require('./assets/static/images/sample.jpg')
            }
        }
    }
}
</script>