一、项目搭建
首先，我们需要搭建一个基本的Vue项目。如果你已经熟悉Vue，可以直接创建项目。以下是使用Vue CLI创建项目的命令：
vue create my-image-display
cd my-image-display
接下来，我们进入项目目录，并启动开发服务器：
npm run serve
二、准备图片资源
三、创建图片展示组件
<template>
<div class="image-container">
<img :src="imageUrl" alt="Image Display" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: require('@/assets/images/your-image.jpg'),
};
},
};
</script>
<style scoped>
.image-container {
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.image-container img {
width: 100%;
height: auto;
display: block;
}
</style>
四、在主页面中使用图片展示组件
<template>
<div id="app">
<ImageDisplay />
</div>
</template>