---
layout: docs
title: RetinaImg
edit_url: "https://github.com/nylas/N1/blob/master/src/components/retina-img.cjsx"
---

<h2>Summary</h2>

<div class="markdown-from-sourecode">
  <p><p>RetinaImg wraps the DOM&#39;s standard <code>&lt;img</code>&gt; tag and implements a <code>UIImage</code> style
interface. Rather than specifying an image <code>src</code>, RetinaImg allows you to provide
an image name. Like UIImage on iOS, it automatically finds the best image for the current
display based on pixel density. Given <code>image.png</code>, on a Retina screen, it looks for
<code>image@2x.png</code>, <code>image.png</code>, <code>image@1x.png</code> in that order. It uses a lookup table and caches
image names, so images generally resolve immediately.</p>
<p>RetinaImg also introduces the concept of image <code>modes</code>. Specifying an image mode
is important for theming: it describes the content of your image, allowing theme
developers to properly adjust it. The four modes are described below:</p>
<ul>
<li>ContentPreserve: Your image contains color or should not be adjusted by any theme.</li>
<li>ContentLight: Your image is a grayscale image with light colors, intended to be shown
against a dark background. If a theme developer changes the background to be light, they
can safely apply CSS filters to invert or darken this image. This mode adds the
<code>content-light</code> CSS class to the image.</li>
<li>ContentDark: Your image is a grayscale image with dark colors, intended to be shown
against a light background. If a theme developer changes the background to be dark, they
can safely apply CSS filters to invert or brighten this image. This mode adds the
<code>content-dark</code> CSS class to the image.</li>
<li>ContentIsMask: This image provides alpha information only, and color should
be based on the <code>background-color</code> of the RetinaImg. This mode adds the
<code>content-mask</code> CSS class to the image, and leverages <code>-webkit-mask-image</code>.
Example: Icons displayed within buttons specify ContentIsMask, and their
color is declared via CSS to be the same as the button text color. Changing
<code>@text-color-subtle</code> in a theme changes both button text and button icons!<pre><code class="lang-css"> <span class="hljs-class">.btn-icon</span> {
   <span class="hljs-attribute">color</span>: <span class="hljs-variable">@text-color-subtle</span>;
   <span class="hljs-tag">img</span><span class="hljs-class">.content-mask</span> { <span class="hljs-attribute">background-color</span>:<span class="hljs-variable">@text-color-subtle</span>; }
 }
</code></pre>
</li>
</ul>
</p>
</div>

<ul>
</ul>


    <h3>Class Properties</h3>

    <h4 id=propTypes>propTypes <a href="#propTypes" class="link"></a></h4>
    <p><p>React <code>props</code> supported by RetinaImg:</p>
    </p>
        <table class="arguments">
            <tr>
              <td style="width:15%;">
                <em>mode</em>
              </td>
              <td>

                <p>(required) One of the RetinaImg.Mode constants. See above for details.</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>name</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> image name to display.</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>url</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> url of an image to display.  May be an http, https, or <code>nylas://&lt;packagename&gt;/&lt;path within package&gt;</code> URL.</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>fallback</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>A <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string'>String</a> image name to use when <code>name</code> cannot be found.</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>selected</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>Appends &quot;-selected&quot; to the end of the image name when when true</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>active</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>Appends &quot;-active&quot; to the end of the image name when when true</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>style</em>
              </td>
              <td>
                <span class="optional">Optional</span>
                <p>An <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/object'>Object</a> with additional styles to apply to the image.</p>

              </td>
            </tr>
            <tr>
              <td style="width:15%;">
                <em>resourcePath</em>
              </td>
              <td>

                <p>(options) Changes the default lookup location used to find the images.</p>

              </td>
            </tr>
        </table>