Vue 3 中 <img> 标签动态绑定图片 URL 地址

<p>在 Vue 3 中，您可以使用`v-bind` 指令（或简写为`:`) 将属性绑定到组件上。要将图片的 URL 地址绑定到`<img>` 标签的`src` 属性上，您可以按照以下步骤进行操作：</p>
<ol>
  <li>在 Vue 组件的`data` 选项中定义一个变量来保存图片的 URL 地址，例如：</li>
  <pre><code>javascript
data() {
  return {
    imageUrl: 'https://example.com/image.jpg'
  };
}
</code></pre>
  <li>在模板中使用`v-bind` 指令将`src` 属性绑定到该变量，例如：</li>
  <pre><code>html
<img :src="imageUrl" alt="Image">
</code></pre>
  <li>当您想要改变图片的 URL 地址时，只需更新`imageUrl` 变量即可。</li>
</ol>
<p>完整的 Vue 组件示例代码如下：</p>
<pre><code>html
<template>
  <div>
    <img :src="imageUrl" alt="Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>
<p></code></pre></p>
<p>这样，当`imageUrl` 变量的值改变时，`<img>` 标签的`src` 属性也会相应地更新，展示新的图片 URL 地址。</p>