Image - Docs

The image endpoint provides customizable placeholder images by specifying size in the URL, with options for background color, text color, and display text, ideal for use in websites and wireframes.

The base URL is: dummyjson.com/image

Generate square image


          // https://dummyjson.com/image/SIZE
          fetch('https://dummyjson.com/image/150')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate custom size image


          // https://dummyjson.com/image/WIDTHxHEIGHT
          fetch('https://dummyjson.com/image/200x100')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate image with custom text


          // https://dummyjson.com/image/SIZE/?text=TEXT
          fetch('https://dummyjson.com/image/400x200/008080/ffffff?text=Hello+Peter')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate image with custom colors


          // https://dummyjson.com/image/SIZE/BACKGROUND/COLOR
          fetch('https://dummyjson.com/image/400x200/282828')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate image with different formats

Supported Formats: png, jpeg, webp


          // https://dummyjson.com/image/SIZE/BACKGROUND/COLOR
          fetch('https://dummyjson.com/image/400x200?type=webp&text=I+am+a+webp+image')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/webp'}

Output:

Generate image with custom font family

Supported Fonts:
bitter, cairo, comfortaa, cookie, dosis, gotham, lobster, marhey, pacifico, poppins, quicksand, qwigley, satisfy, ubuntu


          // https://dummyjson.com/image/SIZE/BACKGROUND/COLOR
          fetch('https://dummyjson.com/image/400x200/282828?fontFamily=pacifico&text=I+am+a+pacifico+font')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate image with custom font size


          // https://dummyjson.com/image/SIZE/?text=TEXT&fontSize=FONT_SIZE
          fetch('https://dummyjson.com/image/400x200/008080/ffffff?text=Hello+Peter!&fontSize=16')
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output:

Generate identicon


          // https://dummyjson.com/icon/HASH/SIZE/?type=png (or svg)
          fetch('https://dummyjson.com/icon/abc123/150') // png is default
          .then(response => response.blob()) // Convert response to blob
          .then(blob => {
            console.log('Fetched image blob:', blob);
          })
          // Blob {size: SIZE, type: 'image/png'}

Output: