如何将图像 url 传递给 Vue 中的组件

超级微笑

我是 Vue 技术的新手。我制作了一个渲染图像的组件。

<template>
  <div>
    <div>
      <img src="@/assets/images/sample.png">
    </div>
  </div>
</template>
<script>
export default {
  name: 'ListItem',
}
</script>

现在我希望这个组件使用从其父级传递的 URL 来呈现图像。提前致谢。

TrustedDev124

我明白你的意思,请试试这个。

<template>
    <div>
        <div>
            <img :src="data.image">
        </div>
    </div>
</template>
<script>
export default {
    name: 'ListItem',
    props: ['data']
}
</script>

然后在父代码中...

<div>
     <ListItem :data= "item"/>
</div>

...

data(){
        return{
            item: {
                image: require("@/assets/images/sample.png"),
            }
        }
    }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将图像 url 作为道具传递给另一个组件?

如何将图像 base64 url 传递给同级组件

如何将参数传递给Vue组件?

如何将数组传递给 Vue 组件?

如何将 typescript 对象传递给 Vue 组件

如何将数据从 Vue 实例传递给嵌套组件

如何将className传递给Gatsby中的图像组件

将vue组件传递给子组件

vue.js 中如何将数据传递给组件?

如何将Blade中的布尔值传递给Vue组件Laravel 7?

如何将具有内容的组件传递给Vue-grid-layout中的GridItem?

如何将图像路径从标签传递到Vue组件

将事件传递给Vue中的渲染组件

如何将CSS样式传递给Vue中的插件?

如何将Vue数据中的值传递给href?

将属性参数传递给Vue组件

如何将组件作为道具传递给Vue.js中的另一个组件

如何将Django中的url值传递给视图

如何将url中的变量传递给python flask

将 URL 参数传递给组件

如何将主Vue实例上的数据传递给vue-router使用的组件?

Vue.js和Vue-Socketio:如何将套接字实例传递给组件

Vue 如何将子组件和父组件数据传递给方法

如何将数组从父组件传递给 Vue 3.0 的 chid 组件?

如何将href参数从父vue组件传递给子组件?

Vue 中如何将数据从组件传递到实例

将本地图像的 URL 作为道具传递给 React 中的组件

Laravel + Vue - 将多维 PHP 数组传递给 vue 组件

如何将数组长度传递给 vue.js 中的另一个组件(从子组件到父组件)?