> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)

# Use a fallback image

Use a [`coalesce`](https://docs.mapbox.com/style-spec/reference/expressions/#coalesce) expression to display another image when a requested image is not available.

This example uses a GeoJSON source with features that include an `icon` property. In this case, one feature has an `icon` property that does not match the name of any image in the [Mapbox Light](https://www.mapbox.com/maps/light) style's [sprite](https://docs.mapbox.com/help/glossary/sprite/). For that feature, the map will display a fallback image of a rocket.

> Example code:

**JavaScript**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Use a fallback image</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.28.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
    const map = new mapboxgl.Map({
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/light-v11',
        center: [-77, 38.75],
        zoom: 5
    });
    map.on('load', () => {
        // Add a new GeoJSON source with features that include
        // an "icon" property. In this case, one feature has an
        // "icon" property that does not match the name of any
        // image in the style's sprite. For this feature, the map
        // will display a fallback image ("rocket").
        map.addSource('points', {
            'type': 'geojson',
            'data': {
                'type': 'FeatureCollection',
                'features': [
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [
                                -77.03238901390978, 38.913188059745586
                            ]
                        },
                        'properties': {
                            'title': 'Washington DC',
                            'icon': 'monument'
                        }
                    },

                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [-79.9959, 40.4406]
                        },
                        'properties': {
                            'title': 'Pittsburgh',
                            // The Mapbox Light style's sprite does not
                            // contain an image with the name "bridges"
                            // but we can display a fallback image.
                            'icon': 'bridges'
                        }
                    },
                    {
                        'type': 'Feature',
                        'geometry': {
                            'type': 'Point',
                            'coordinates': [-76.2859, 36.8508]
                        },
                        'properties': {
                            'title': 'Norfolk',
                            'icon': 'harbor'
                        }
                    }
                ]
            }
        });
        map.addLayer({
            'id': 'points',
            'type': 'symbol',
            'source': 'points',
            'layout': {
                // These icons are a part of the Mapbox Light style.
                // To view all images available in a Mapbox style, open
                // the style in Mapbox Studio and click the "Images" tab.
                // To add a new image to the style at runtime see
                // https://docs.mapbox.com/mapbox-gl-js/example/add-image/
                'icon-image': [
                    'coalesce',
                    ['image', ['get', 'icon']],
                    // If no image with the name above exists, show the
                    // "rocket" image instead.
                    ['image', 'rocket']
                ],
                'text-field': ['get', 'title'],
                'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
                'text-offset': [0, 0.6],
                'text-anchor': 'top'
            }
        });
    });
</script>

</body>
</html>
```

**React**

```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    mapRef.current = new mapboxgl.Map({
      // TO MAKE THE MAP APPEAR YOU MUST
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/light-v11',
      center: [-77, 38.75],
      zoom: 5
    });

    mapRef.current.on('load', () => {
      mapRef.current.addSource('points', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-77.03238901390978, 38.913188059745586]
              },
              properties: {
                title: 'Washington DC',
                icon: 'monument'
              }
            },
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-79.9959, 40.4406]
              },
              properties: {
                title: 'Pittsburgh',
                icon: 'bridges'
              }
            },
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-76.2859, 36.8508]
              },
              properties: {
                title: 'Norfolk',
                icon: 'harbor'
              }
            }
          ]
        }
      });

      mapRef.current.addLayer({
        id: 'points',
        type: 'symbol',
        source: 'points',
        layout: {
          'icon-image': [
            'coalesce',
            ['image', ['get', 'icon']],
            ['image', 'rocket']
          ],
          'text-field': ['get', 'title'],
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top'
        }
      });
    });
  }, []);

  return <div ref={mapContainerRef} id="map" style={{ height: '100%' }}></div>;
};

export default MapboxExample;
```