Overview
Fetch a resource and return it as an
HTMLImageElement. The image is loaded with crossOrigin = 'use-credentials' to support cross-origin requests with cookies.Signature
fetchImage(url: string): Promise<HTMLImageElement>
| Parameter | Type | Description |
|---|---|---|
url |
string |
URL of the image resource. |
Returns:
Promise<HTMLImageElement> — Loaded image element.Example
Click the button to load the image
<div class="mb-3">
<label class="form-label">Image URL</label>
<input id="fetchImageInput" class="form-control form-control-solid" value="../../assets/media/logos/metronic.ico" readonly>
</div>
<button id="fetchImageBtn" class="btn btn-primary mb-3">Fetch Image</button>
<div id="fetchImageResult">Click the button to load the image</div>
document.getElementById('fetchImageBtn').addEventListener('click', async function() {
var resultEl = document.getElementById('fetchImageResult');
resultEl.textContent = 'Loading...';
try {
var img = await metronicExtension.utils.fetchImage(
document.getElementById('fetchImageInput').value
);
img.style.maxWidth = '200px';
resultEl.textContent = '';
resultEl.appendChild(img);
} catch(e) {
resultEl.textContent = 'Error: ' + e.message;
}
});