diff --git a/public/loading_error.png b/public/loading_error.png new file mode 100644 index 000000000..4f588fbe1 Binary files /dev/null and b/public/loading_error.png differ diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js index c974ab1b0..6d05d3388 100644 --- a/resources/js/components/image-manager.js +++ b/resources/js/components/image-manager.js @@ -74,6 +74,10 @@ class ImageManager { this.listContainer.addEventListener('event-emit-select-image', this.onImageSelectEvent.bind(this)); + this.listContainer.addEventListener('error', event => { + event.target.src = baseUrl('loading_error.png'); + }, true); + onSelect(this.selectButton, () => { if (this.callback) { this.callback(this.lastSelected); diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index a90f74e27..def3db5af 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -395,8 +395,9 @@ class MarkdownEditor { actionInsertImage() { const cursorPos = this.cm.getCursor('from'); window.ImageManager.show(image => { + const imageUrl = image.thumbs.display || image.url; let selectedText = this.cm.getSelection(); - let newText = "[](" + image.url + ")"; + let newText = "[](" + image.url + ")"; this.cm.focus(); this.cm.replaceSelection(newText); this.cm.setCursor(cursorPos.line, cursorPos.ch + newText.length); diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index bde73f4bf..7a2b6ceba 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -563,8 +563,9 @@ class WysiwygEditor { } // Replace the actively selected content with the linked image + const imageUrl = image.thumbs.display || image.url; let html = `<a href="${image.url}" target="_blank">`; - html += `<img src="${image.thumbs.display}" alt="${image.name}">`; + html += `<img src="${imageUrl}" alt="${image.name}">`; html += '</a>'; win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html); }, 'gallery'); @@ -723,8 +724,9 @@ class WysiwygEditor { tooltip: 'Insert an image', onclick: function () { window.ImageManager.show(function (image) { + const imageUrl = image.thumbs.display || image.url; let html = `<a href="${image.url}" target="_blank">`; - html += `<img src="${image.thumbs.display}" alt="${image.name}">`; + html += `<img src="${imageUrl}" alt="${image.name}">`; html += '</a>'; editor.execCommand('mceInsertContent', false, html); }, 'gallery'); diff --git a/resources/views/pages/parts/image-manager-form.blade.php b/resources/views/pages/parts/image-manager-form.blade.php index 6d6255226..81041fcac 100644 --- a/resources/views/pages/parts/image-manager-form.blade.php +++ b/resources/views/pages/parts/image-manager-form.blade.php @@ -8,7 +8,7 @@ <div class="image-manager-viewer"> <a href="{{ $image->url }}" target="_blank" rel="noopener" class="block"> - <img src="{{ $image->thumbs['display'] }}" + <img src="{{ $image->thumbs['display'] ?? $image->url }}" alt="{{ $image->name }}" class="anim fadeIn" title="{{ $image->name }}">