在 Vue3 中,你可以使用``标签来展示图片,并通过设置`src`属性来指定图片的 url 地址。同时,你可以使用`style`属性来设置图片的展示大小。

以下是一个示例代码:

<template>
  <div>
    <img :src="imageUrl" :style="{ width: imageSize.width + 'px', height: imageSize.height + 'px' }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg', // 图片 url 地址
      imageSize: {
        width: 200, // 图片展示的宽度
        height: 300 // 图片展示的高度
      }
    };
  }
};
</script>

在上面的代码中,`imageUrl`变量指定了图片的 url 地址,`imageSize`对象包含了图片的展示大小,其中`width`和`height`分别设置了图片的宽度和高度。

在``标签中,通过`v-bind`指令将`src`属性绑定到`imageUrl`变量,同时使用`:style`指令将`style`属性绑定到一个对象,该对象使用`imageSize`中的宽度和高度来设置图片的展示大小。

这样,当组件渲染时,将会展示指定 url 地址的图片,并且图片的展示大小将会根据`imageSize`中的设置来显示。


原文地址: https://www.cveoy.top/t/topic/o3qS 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录