动态图像绑定vue

织梦狗教程前端问题

2022-01-01

Dynamically image binding vue(动态图像绑定vue)

本文介绍了动态图像绑定vue的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想和这里一样，但我想使用 images.sample 作为参数，例如 props:['images.sample'],

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>

推荐答案

你的子组件应该是这样的:

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>

这篇关于动态图像绑定vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！