Vanessa 2025-07-09 17:29:07 +08:00
parent 3c0dcc4e49
commit f2e57f7028
5 changed files with 15 additions and 5 deletions

View file

@ -21,6 +21,7 @@ import {renameAsset} from "../../../editor/rename";
import * as dayjs from "dayjs";
import {getColId} from "./col";
import {getFieldIdByCellElement} from "./row";
import {getCompressURL} from "../../../util/image";
export const bindAssetEvent = (options: {
protyle: IProtyle,
@ -59,7 +60,7 @@ export const getAssetHTML = (cellElements: HTMLElement[]) => {
genCellValueByElement("mAsset", cellElements[0]).mAsset.forEach((item, index) => {
let contentHTML;
if (item.type === "image") {
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${item.content}">
contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${getCompressURL(item.content)}">
<img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${item.content}"/>
</span>`;
} else {

View file

@ -16,6 +16,7 @@ import {webUtils} from "electron";
/// #endif
import {isBrowser} from "../../../util/functions";
import {Constants} from "../../../constants";
import {getCompressURL} from "../../../util/image";
const genAVRollupHTML = (value: IAVCellValue) => {
let html = "";
@ -82,7 +83,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
case "mAsset":
value.mAsset?.forEach(item => {
if (item.type === "image") {
html += `<img class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${item.content}">`;
html += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}">`;
} else {
html += `<span class="b3-chip b3-chip--middle av__celltext--url ariaLabel" aria-label="${escapeAttr(item.content)}" data-name="${escapeAttr(item.name)}" data-url="${escapeAttr(item.content)}">${item.name || item.content}</span>`;
}

View file

@ -18,6 +18,7 @@ import {escapeAttr, escapeHtml} from "../../../util/escape";
import {electronUndo} from "../../undo";
import {getFieldIdByCellElement} from "./row";
import {getFieldsByData} from "./view";
import {getCompressURL} from "../../../util/image";
const renderCellURL = (urlContent: string) => {
let host = urlContent;
@ -969,7 +970,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru
} else if (cellValue.type === "mAsset") {
cellValue?.mAsset?.forEach((item) => {
if (item.type === "image") {
text += `<img class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${item.content}">`;
text += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}">`;
} else {
text += `<span class="b3-chip av__celltext--url ariaLabel" aria-label="${escapeAttr(item.content)}" data-name="${escapeAttr(item.name)}" data-url="${escapeAttr(item.content)}">${item.name || item.content}</span>`;
}

View file

@ -11,6 +11,7 @@ import {avRender, updateSearch} from "../render";
import {getViewIcon} from "../view";
import {processRender} from "../../../util/processCode";
import {getColIconByType, getColNameByType} from "../col";
import {getCompressURL} from "../../../../util/image";
export const renderGallery = (options: {
blockElement: HTMLElement,
@ -71,9 +72,9 @@ export const renderGallery = (options: {
const coverClass = "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio;
if (item.coverURL) {
if (item.coverURL.startsWith("background")) {
galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="${item.coverURL}"></div>`;
galleryHTML += `<div class="${coverClass}"><img class="av__gallery-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="${item.coverURL}"></div>`;
} else {
galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" src="${item.coverURL}"></div>`;
galleryHTML += `<div class="${coverClass}"><img loading="lazy" class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" src="${getCompressURL(item.coverURL)}"></div>`;
}
} else if (item.coverContent) {
galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;

6
app/src/util/image.ts Normal file
View file

@ -0,0 +1,6 @@
export const getCompressURL = (url: string) => {
if (url.startsWith("assets/") &&
(url.endsWith(".png") || url.endsWith(".jpg") || url.endsWith(".jpeg"))) {
return url + "?style=thumb";
}
};