vue3中img 属性加入图片url地址展示

在Vue 3中，您可以使用v-bind指令（或简写为:）将属性绑定到组件上。要将图片的URL地址绑定到<img>标签的src属性上，您可以按照以下步骤进行操作：

在Vue组件的data选项中定义一个变量来保存图片的URL地址，例如：

data() {
  return {
    imageUrl: 'https://example.com/image.jpg'
  };
}

在模板中使用v-bind指令将src属性绑定到该变量，例如：

<img :src="imageUrl" alt="Image">

当您想要改变图片的URL地址时，只需更新imageUrl变量即可。

完整的Vue组件示例代码如下：

<template>
  <div>
    <img :src="imageUrl" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

这样，当imageUrl变量的值改变时，<img>标签的src属性也会相应地更新，展示新的图片URL地址