🐛 修复部分格式的图片渲染失败问题

*PostID:47809689
This commit is contained in:
BTMuli
2024-01-10 19:33:56 +08:00
parent f839babdaa
commit c03284490f
3 changed files with 39 additions and 13 deletions

View File

@@ -2,7 +2,7 @@
<div class="tp-image-box">
<img
:style="getImageStyle()"
:src="props.data.insert.image"
:src="getImageUrl()"
:alt="props.data.insert.image"
:title="getImageTitle()"
/>
@@ -58,6 +58,12 @@ function getImageTitle(): string {
}
return res.join("\n");
}
function getImageUrl(): string {
const img = props.data.insert.image;
const append = "?x-oss-process=image/format,webp";
return img + append;
}
</script>
<style lang="css" scoped>
.tp-image-box {

View File

@@ -1,13 +1,9 @@
/**
* @file plugins Mys utils news.ts
* @file plugins/Mys/utils/news.ts
* @description Mys 插件咨讯工具
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.1
* @since Beta v0.4.0
*/
// 默认封面图
const defaultCover = "/source/UI/defaultCover.webp";
/**
* @description 活动状态
* @since Alpha v0.2.1
@@ -55,6 +51,31 @@ export function getActivityStatus(status: number): TGApp.Plugins.Mys.News.Render
}
}
/**
* @description 获取封面图
* @since Beta v0.4.0
* @param {TGApp.Plugins.Mys.News.Item} item 咨讯列表项
* @returns {string} 封面图链接
*/
export function getPostCover(item: TGApp.Plugins.Mys.News.Item): string {
// 默认封面图
const defaultCover = "/source/UI/defaultCover.webp";
let cover;
if (item.cover) {
cover = item.cover.url;
} else if (item.post.cover) {
cover = item.post.cover;
} else if (item.post.images.length > 0) {
cover = item.post.images[0];
}
if (cover === undefined) {
cover = defaultCover;
} else {
cover = `${cover}?x-oss-process=image/format,webp`;
}
return cover;
}
/**
* @description 获取公共属性
* @since Alpha v0.2.1
@@ -64,7 +85,7 @@ export function getActivityStatus(status: number): TGApp.Plugins.Mys.News.Render
function getCommonCard(item: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.News.RenderCard {
return {
title: item.post.subject,
cover: item.cover?.url || item.post.cover || item.post.images[0] || defaultCover,
cover: getPostCover(item),
postId: Number(item.post.post_id),
subtitle: item.post.post_id,
user: {

View File

@@ -1,23 +1,22 @@
/**
* @file plugins/Mys/utils/getPostsCard.ts
* @description Mys 插件帖子渲染
* @since Beta v0.3.7
* @since Beta v0.4.0
*/
const defaultCover = "/source/UI/defaultCover.webp";
import { getPostCover } from "./getNewsCard";
/**
* @description 解析单个帖子
* @since Beta v0.3.7
* @since Beta v0.4.0
* @param {TGApp.Plugins.Mys.News.Item} post 帖子
* @returns {TGApp.Plugins.Mys.Forum.RenderCard} 渲染用帖子
*/
function getPostCard(post: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.Forum.RenderCard {
const postCover = post.cover?.url || post.post.cover || post.post.images[0] || defaultCover;
const userLabel = getUserLabel(post);
return {
title: post.post.subject,
cover: postCover,
cover: getPostCover(post),
postId: post.post.post_id,
subtitle: post.post.post_id,
user: {