Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
37fccf83 1 parent 0a030160

perf(图片优化): 为所有图片URL添加压缩和缩略图参数以提高加载性能

Inline Side-by-side
Showing 3 changed files with 14 additions and 14 deletions
......@@ -108,7 +108,7 @@
<div class="three-columns">
<!-- 三师七证栏目 -->
<div class="column-item" v-for="(item, index) in mastersList" :key="index">
<div class="column-content" :style="{ backgroundImage: `url(${item.cover})` }">
<div class="column-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/100x/strip/quality/70'})` }">
<div class="column-overlay"></div>
<div class="column-text">
<h3 class="column-title">{{ item.name }}</h3>
......@@ -148,7 +148,7 @@
<div class="news-carousel" ref="newsCarousel">
<div class="news-item" v-for="(item, index) in displayNewsItems" :key="index" @click="handleNewsClick(item)">
<div class="news-image">
<img :src="item.image" :alt="item.title">
<img :src="item.image + '?imageMogr2/thumbnail/200x/strip/quality/70'" :alt="item.title">
</div>
<div class="news-content">
<div class="news-title">{{ item.title }}</div>
......@@ -202,7 +202,7 @@ const videoOptions = ref({
aspectRatio: '16:9',
controls: true,
preload: 'metadata',
poster: 'https://cdn.ipadbiz.cn/stdj/video/workflow.jpg',
poster: 'https://cdn.ipadbiz.cn/stdj/video/workflow.jpg?imageMogr2/thumbnail/200x/strip/quality/70',
playbackRates: [0.5, 1, 1.25, 1.5, 2],
})
......@@ -261,7 +261,7 @@ const currentStep = computed(() => {
* @returns {Object} 内联样式对象
*/
const intro_background_style = computed(() => {
const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover : ''
const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover + '?imageMogr2/thumbnail/400x/strip/quality/70' : ''
if (!url) return {}
const safe_url = encodeURI(url)
return { backgroundImage: 'url("' + safe_url + '")' }
......@@ -759,7 +759,7 @@ const handlePhotoClick = () => {
margin: 0 1rem;
height: 3.5rem;
border-radius: 1rem;
background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E7%85%A7%E7%89%87%E4%B8%8B%E8%BD%BD@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E7%85%A7%E7%89%87%E4%B8%8B%E8%BD%BD@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -1048,7 +1048,7 @@ const handlePhotoClick = () => {
.ceremony-wrapper {
position: relative;
width: 100vw;
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -1582,7 +1582,7 @@ const handlePhotoClick = () => {
.news-section {
padding: 3rem 1.5rem;
position: relative;
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
......@@ -1597,7 +1597,7 @@ const handlePhotoClick = () => {
left: 0;
width: 100%; /* 可根据实际图片大小调整 */
height: 200px; /* 可根据实际图片大小调整 */
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png');
background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
......
......@@ -86,13 +86,13 @@ onMounted(async () => {
id: item.id,
role: item.post_excerpt,
name: item.post_title,
image: item.photo
image: item.photo + '?imageMogr2/thumbnail/400x/strip/quality/70'
}))
gridItems.value = gridItemsData.map(item => ({
id: item.id,
role: item.post_excerpt,
name: item.post_title,
image: item.photo
image: item.photo + '?imageMogr2/thumbnail/400x/strip/quality/70'
}))
}
})
......
<!--
* @Date: 2025-10-30 20:00:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-12 11:30:48
* @LastEditTime: 2025-11-13 10:33:41
* @FilePath: /stdj_h5/src/views/MastersDetail.vue
* @Description: 文件描述
-->
......@@ -88,7 +88,7 @@ const loadArticleDetail = async () => {
id: data.id,
role: data.post_excerpt,
name: data.post_title,
src: data?.file_list?.photo?.value,
src: data?.file_list?.photo?.value + '?imageMogr2/thumbnail/400x/strip/quality/70',
desc: data.post_content,
imgs: data?.file_list?.img || []
}
......@@ -117,7 +117,7 @@ const initWaterfallImages = function (imgs) {
const src = typeof item === 'string' ? item : (item?.value || item?.src || '')
return {
id: typeof item === 'object' && item?.id ? item.id : idx + 1,
src: src,
src: src + '?imageMogr2/thumbnail/400x/strip/quality/70',
title: typeof item === 'object' && item?.name ? item.name : ('图片' + (idx + 1)),
height: Math.floor(Math.random() * 200) + 200
}
......@@ -172,7 +172,7 @@ const onImageError = function () {
*/
const onImageClick = function (item) {
const currentIndex = all_images.value.findIndex(function (img) { return img.id === item.id })
const images = all_images.value.map(function (img) { return img.src })
const images = all_images.value.map(function (img) { return img.src.replace('?imageMogr2/thumbnail/400x/strip/quality/70', '') })
showImagePreview({
images: images,
startPosition: currentIndex >= 0 ? currentIndex : 0,
......