93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
||
<div class="image-container">
|
||
<!-- 本地服务器图片 -->
|
||
<div class="image-box">
|
||
<h3>本地服务器图片</h3>
|
||
<img
|
||
src="http://localhost:3456/file/download/view=project-LGFZOJYQ"
|
||
alt="本地服务器图片"
|
||
class="responsive-image"
|
||
>
|
||
</div>
|
||
|
||
<!-- 网络图片 -->
|
||
<div class="image-box">
|
||
<h3>网络图片示例</h3>
|
||
<img
|
||
src="https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=75398285,2076154952&fm=253&gp=0.jpg"
|
||
alt="示例网络图片"
|
||
class="responsive-image"
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ImageViewer',
|
||
// 可以在这里添加数据属性来动态设置图片URL
|
||
data() {
|
||
return {
|
||
// 示例：动态图片URL
|
||
dynamicImageUrl: 'https://example.com/your-image.jpg'
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.image-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 30px;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.image-box {
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
max-width: 600px;
|
||
text-align: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.image-box:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.image-box h3 {
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.responsive-image {
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 8px;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.responsive-image:hover {
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.image-url {
|
||
margin-top: 15px;
|
||
font-size: 0.9rem;
|
||
color: #666;
|
||
word-break: break-all;
|
||
background: #f9f9f9;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
}
|
||
</style> |