--- title: "Open image files (JPG, PNG, TIFF) from URL in JavaScript | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-remote-url/" md_url: "https://www.nutrient.io/guides/web/open-a-document/image-from-remote-url.md" last_updated: "2026-05-30T02:20:01.405Z" description: "Learn how to open and display PDF, MS Office, and image files from remote URLs using JavaScript with our easy-to-follow guide." --- # Open image files from a URL using JavaScript ### PDF [PDF](https://www.nutrient.io/guides/web/open-a-document/from-remote-url.md) ### MS Office [MS Office](https://www.nutrient.io/guides/web/open-a-document/office-from-remote-url.md) ### Image [Image](https://www.nutrient.io/guides/web/open-a-document/image-from-remote-url.md) To load a document from a remote URL in standalone mode, pass it in the [configuration](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html) object passed to [`NutrientViewer.load()`](https://www.nutrient.io/api/web/NutrientViewer.html#.load): ```js // Standalone mode: loads document from remote URL NutrientViewer.load({ container: "#pspdfkit", document: documentUrl }).then((instance) => { console.log("Document loaded successfully"); }).catch((error) => { console.error("Failed to load document:", error); }); ``` **Note:** For better error handling, fetch the document yourself and pass the `ArrayBuffer` instead of the URL directly. This enables you to validate the response before loading. Otherwise, invalid responses will produce a generic `"File not a PDF or corrupted"` error. ## Temporary storage for PDF downloads When you load a PDF from a URL in standalone mode, Nutrient manages temporary download storage automatically. For larger eligible PDFs, it may use the browser’s [origin private file system (OPFS)](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) to reduce peak memory usage while the document is downloading. If you don’t want Nutrient to use OPFS for temporary storage, set [`tempStorage: "memory"`](https://www.nutrient.io/api/web/interfaces/Configuration.html#tempstorage). You can also set `tempStorage: "opfs"` to prefer OPFS for eligible URL-loaded PDFs, regardless of file size. For details about how temporary storage works, when Nutrient uses it, and how to configure it, see our [temporary storage](https://www.nutrient.io/guides/web/open-a-document/temp-storage.md) guide. ## Accessing an authenticated document Sometimes you may want to restrict access to your documents so they’re not publicly available on the internet. One common way to achieve this is with [HTTP Basic authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme). If you try to load a document from a URL that’s protected by HTTP Basic authentication, Nutrient Web SDK will ask you for a username and password. To avoid entering these, you can fetch the document yourself, passing the credentials as an `Authorization` header. Once you’ve received the response, you can pass it to the `NutrientViewer.load()` method as an `ArrayBuffer`: ```js // Standalone mode: loads HTTP Basic authenticated document async function loadProtectedPDF(documentUrl, username, password) { // Base64-encode your credentials and set them as an `Authorization` header. const headers = new Headers(); const encodedCredentials = btoa(`${username}:${password}`); headers.set("Authorization", `Basic ${encodedCredentials}`); try { // Fetch the PDF and read the response as an `ArrayBuffer`. const pdfResponse = await fetch(documentUrl, { headers }); if (!pdfResponse.ok) { throw new Error(`HTTP error: ${pdfResponse.status}`); } const documentBuffer = await pdfResponse.arrayBuffer(); // Pass the `ArrayBuffer` as a PDF option instead of a URL. const instance = await NutrientViewer.load({ container: "#pspdfkit", document: documentBuffer }); console.log("Protected document loaded successfully"); return instance; } catch (error) { console.error("Failed to load protected document:", error); throw error; } } ``` ## Accessing an encrypted document The easiest way to securely transfer your document is to serve it through HTTPS. This way, the browser will take care of decrypting the secured communication for you. Additionally, you can encrypt the document’s content on the server using your own custom encryption. When you fetch the encrypted document, decrypt the data in the browser into an `ArrayBuffer`. Then pass it to the `NutrientViewer.load()` method, which will render your document: ```js // Standalone mode: loads decrypted document from ArrayBuffer NutrientViewer.load({ container: "#pspdfkit", document: myDecryptedArrayBuffer }).then((instance) => { console.log("Decrypted document loaded"); }).catch((error) => { console.error("Failed to load document:", error); }); ``` ## Loading options Open files in any [supported file format](https://www.nutrient.io/guides/web/about/file-type-support.md). `NutrientViewer.load()` accepts the following configuration options: - [`annotationTooltipCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.annotationTooltipCallback) - [`customRenderers`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.customRenderers) - [`electronicSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#.electronicSignatures) - [`annotationPresets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#annotationPresets) - [`autoSaveMode`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#autoSaveMode) - [`baseUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#baseUrl) - [`container`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#container) - [`customFonts`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#customFonts) (Standalone only) - [`disableForms`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableForms) - [`disableHighQualityPrinting`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableHighQualityPrinting) - [`disableOpenParameters`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableOpenParameters) - [`disableTextSelection`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableTextSelection) - [`disableWebAssemblyStreaming`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#disableWebAssemblyStreaming) (Standalone only) - [`document`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#document) (Standalone only) - [`editableAnnotationTypes`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#editableAnnotationTypes) - [`enableAutomaticLinkExtraction`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableAutomaticLinkExtraction) (Standalone only) - [`enableServiceWorkerSupport`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#enableServiceWorkerSupport) - [`formFieldsNotSavingSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#formFieldsNotSavingSignatures) - [`headless`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#headless) - [`initialViewState`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#initialViewState) - [`instantJSON`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#instantJSON) (Standalone only) - [`isEditableAnnotation`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableAnnotation) - [`isEditableComment`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#isEditableComment) - [`licenseKey`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#licenseKey) (Standalone only) - [`locale`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#locale) - [`maxDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxDefaultZoomLevel) - [`maxPasswordRetries`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#maxPasswordRetries) - [`minDefaultZoomLevel`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#minDefaultZoomLevel) - [`overrideMemoryLimit`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#overrideMemoryLimit) (Standalone only) - [`password`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#password) - [`populateInkSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateInkSignatures) - [`populateStoredSignatures`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#populateStoredSignatures) - [`preventTextCopy`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#preventTextCopy) - [`printMode`](https://www.nutrient.io/api/web/modules/NutrientViewer.html#.PrintMode) - [`renderPageCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#renderPageCallback) - [`serverUrl`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#serverUrl) - [`signal`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#signal) - [`stampAnnotationTemplates`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#stampAnnotationTemplates) - [`standaloneInstancesPoolSize`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#standaloneInstancesPoolSize) (Standalone only) - [`styleSheets`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#styleSheets) - [`theme`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#theme) - [`toolbarItems`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarItems) - [`toolbarPlacement`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#toolbarPlacement) - [`trustedCAsCallback`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#trustedCAsCallback) (Standalone only) - [`XFDF`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDF) (Standalone only) - [`XFDFKeepCurrentAnnotations`](https://www.nutrient.io/api/web/NutrientViewer.Configuration.html#XFDFKeepCurrentAnnotations) (Standalone only) **Example** ```js NutrientViewer.load({ container: "#pspdfkit", document: documentUrl, toolbarItems: NutrientViewer.defaultToolbarItems.filter(item => item.type!== "print"), initialViewState: new NutrientViewer.ViewState({ sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS }) }).then((instance) => { console.log("Document loaded successfully"); }).catch((error) => { console.error("Failed to load document:", error); }); ``` --- ## Related pages - [Open documents from Document Engine](/guides/web/open-a-document/from-document-engine.md) - [Open PDFs from Base64 in the browser using JavaScript](/guides/web/open-a-document/from-base64-data.md) - [Open PDFs using DWS Viewer API](/guides/web/open-a-document/from-dws-viewer-api.md) - [Open and display PDFs from a Blob using JavaScript](/guides/web/open-a-document/from-blob.md) - [Open PDFs from an ArrayBuffer using JavaScript](/guides/web/open-a-document/from-arraybuffer.md) - [Open local PDF files using JavaScript](/guides/web/open-a-document/from-local-storage.md) - [Open image files from an array buffer using JavaScript](/guides/web/open-a-document/image-from-arraybuffer.md) - [Open and display PDF files from a remote URL using JavaScript](/guides/web/open-a-document/from-remote-url.md) - [Open Base64 image files using JavaScript](/guides/web/open-a-document/image-from-base64-data.md) - [Open image files from a Blob using JavaScript](/guides/web/open-a-document/image-from-blob.md) - [Open and display PDFs in the browser using JavaScript](/guides/web/open-a-document.md) - [Open local image files using JavaScript](/guides/web/open-a-document/image-from-local-storage.md) - [Open Base64 MS Office files using JavaScript](/guides/web/open-a-document/office-from-base64-data.md) - [Opening specific pages in PDFs using JavaScript](/guides/web/features/open-parameters.md) - [Open MS Office files from an ArrayBuffer using JavaScript](/guides/web/open-a-document/office-from-arraybuffer.md) - [Open MS Office files from a Blob using JavaScript](/guides/web/open-a-document/office-from-blob.md) - [Temporary storage for PDF downloads](/guides/web/open-a-document/temp-storage.md) - [Open local MS Office files using JavaScript](/guides/web/open-a-document/office-from-local-storage.md) - [Open MS Office files from a URL using JavaScript](/guides/web/open-a-document/office-from-remote-url.md)