Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 04d0cf6a 编写于 作者: M Matt Bierner
浏览文件
操作

Show errors when image can't be loaded 

For #81803
上级 aeae28bf
隐藏空白更改
内联 并排
Showing with 40 addition and 17 deletion
extensions/image-preview/media/main.css
浏览文件 @ 04d0cf6a
......@@ -6,6 +6,7 @@
html, body {
height: 100%;
max-height: 100%;
text-align: center;
}
body img {
......@@ -77,18 +78,34 @@ body img {
margin-left: 5px;
}
.loading {
position: fixed;
.container.loading,
.container.error {
display: flex;
justify-content: center;
align-items: center;
}
.loading-indicator {
width: 30px;
height: 30px;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -15px;
background-image: url('./loading.svg');
background-size: cover;
}
.loading-indicator,
.image-load-error-message {
display: none;
}
.loading .loading-indicator,
.error .image-load-error-message {
display: block;
}
.image-load-error-message {
margin: 1em;
}
.vscode-dark .loading {
background-image: url('./loading-dark.svg');
}
......
extensions/image-preview/media/main.js
浏览文件 @ 04d0cf6a
......@@ -72,7 +72,7 @@
let hasLoadedImage = false;
// Elements
const container = /** @type {HTMLElement} */(document.querySelector('body'));
const container = document.body;
const image = document.createElement('img');
function updateScale(newScale) {
......@@ -232,19 +232,15 @@
image.classList.add('scale-to-fit');
image.addEventListener('load', () => {
document.querySelector('.loading').remove();
hasLoadedImage = true;
if (!image) {
return;
}
vscode.postMessage({
type: 'size',
value: `${image.naturalWidth}x${image.naturalHeight}`,
});
container.classList.add('ready');
document.body.classList.remove('loading');
document.body.classList.add('ready');
document.body.append(image);
updateScale(scale);
......@@ -254,6 +250,12 @@
}
});
image.addEventListener('error', () => {
hasLoadedImage = true;
document.body.classList.add('error');
document.body.classList.remove('loading');
});
image.src = decodeURI(settings.src);
window.addEventListener('message', e => {
......
extensions/image-preview/src/preview.ts
浏览文件 @ 04d0cf6a
......@@ -4,9 +4,12 @@
*--------------------------------------------------------------------------------------------*/
import * as vscode from 'vscode';
import { SizeStatusBarEntry } from './sizeStatusBarEntry';
import { ZoomStatusBarEntry, Scale } from './zoomStatusBarEntry';
import * as nls from 'vscode-nls';
import { Disposable } from './dispose';
import { SizeStatusBarEntry } from './sizeStatusBarEntry';
import { Scale, ZoomStatusBarEntry } from './zoomStatusBarEntry';
const localize = nls.loadMessageBundle();
const enum PreviewState {
Disposed,
......@@ -132,8 +135,9 @@ export class Preview extends Disposable {
<meta id="image-preview-settings" data-settings="${escapeAttribute(JSON.stringify(settings))}">
</head>
<body class="container image scale-to-fit">
<div class='loading'></div>
<body class="container image scale-to-fit loading">
<div class="loading-indicator"></div>
<div class="image-load-error-message">${localize('preview.imageLoadError', "An error occurred while loading the image")}</div>
<script src="${escapeAttribute(this.extensionResource('/media/main.js'))}"></script>
</body>
</html>`;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或