Overview Here are my notes on how to use the Universal Viewer npm package in Next.js. Installation Install with the following command. n p m i u n i v e r s a l v i e w e r Implementation Since it uses useEffect, it appeared necessary to implement it as a client component. Also, by adding the uv class to the div tag, the CSS was applied correctly. ...
In recent years, it has become common for museums, libraries, and archives to publish images using the International Image Interoperability Framework (IIIF), an international framework for image sharing. https://iiif.io/ For publishing IIIF images, viewers such as Mirador and Universal Viewer are used. https://projectmirador.org/ https://universalviewer.io/ In digital archive systems that adopt the latter Universal Viewer, you can often obtain a URL specifying a particular frame by appending “#?cv={image frame index}”. Note that the index starts from 0, so to specify the 2nd frame, you would use 1. ...
Overview I created a page where Universal Viewer is displayed across the entire page, as shown below, so this is a memo of the process. Universal Viewer v4 is used. https://nuxt3-demo-nine.vercel.app/uv/?manifest=https://dl.ndl.go.jp/api/iiif/3437686/manifest.json Source Code Please refer to the following source code. https://github.com/nakamura196/nuxt3-demo/blob/main/public/uv/index.html Referring to the following page: https://github.com/UniversalViewer/universalviewer/wiki/UV-Examples and the following sample, the viewer size is adjusted to change according to page resizing. https://codesandbox.io/s/uv-url-adapter-example-9d6x8 It also includes code to receive a manifest query parameter. ...