vue3中img 属性加入图片url地址展示 并且设置图片展示大小
在Vue3中,你可以使用<img>标签来展示图片,并通过设置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分别设置了图片的宽度和高度。
在<img>标签中,通过v-bind指令将src属性绑定到imageUrl变量,同时使用:style指令将style属性绑定到一个对象,该对象使用imageSize中的宽度和高度来设置图片的展示大小。
这样,当组件渲染时,将会展示指定url地址的图片,并且图片的展示大小将会根据imageSize中的设置来显示
原文地址: https://www.cveoy.top/t/topic/hAFG 著作权归作者所有。请勿转载和采集!