screen size not supported

Docs

You can use examples below to check how DummyJSON works.

Image


The base URL is: dummyjson.com/image

Generate square image

The URL is: dummyjson.com/image 

              
// https://jsonexamples.com/image/SIZE
fetch('https://jsonexamples.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'}
Response: 150x150

Generate image with custom width / height

The URL is: jsonexamples.com/image 

              
// https://jsonexamples.com/image/WIDTHxHEIGHT
fetch('https://jsonexamples.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'}
Response: 200x100

Generate image with custom text

The URL is: jsonexamples.com/image 

              
// 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'}
Response: size 400x200, background #008080, color #ffffff, text Hello Peter

Generate image with custom background color

The URL is: dummyjson.com/image 

              
// https://dummyjson.com/image/SIZE/BACKGROUND
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'}
Response: size 400x200, background #282828

Generate image with custom background and text color

The URL is: dummyjson.com/image 

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

Generate image with different image formats

The URL is: dummyjson.com/image
Supported Formats: [png, jpg, webp] 

              
// https://dummyjson.com/image/SIZE/BACKGROUND/COLOR
fetch('https://dummyjson.com/image/100?type=webp')
.then(response => response.blob()) // Convert response to blob
.then(blob => {
  console.log('Fetched image blob:', blob);
})
// Blob {size: SIZE, type: 'image/webp'}
Response: size 100x100, type webp

Generate image with custom font family

The URL is: dummyjson.com/image
Supported Formats: [ bitter , cairo , comfortaa , cookie , dosis , gotham , lobster , marhey , pacifico , poppins , quicksand , qwigley , satisfy , ubuntu ] 

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

Generate image with custom font size

The URL is: dummyjson.com/image 

              
// 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'}
Response: size 400x200, background #008080, color #ffffff, text Hello Peter, fontSize 16
Comments Todos