Image

Image controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <button> tag, and classes should follow on from the surrounding <div>.

The control contains an <img> tag to display either a relevant placeholder or a preview of the currently uploaded file.

Currently, 2 placeholder images have been included, namely image_placeholder.png and image_placeholderb.png

Style	Attribute	Value	Standard Example
Standard
Disabled	class disabled	disabled disabled
Invalid	class	invalid
Read Only	class readonly	readonly readonly

    
      <form role="form">
        <div class="form-row">
          <div class="form-group image-input">
            <input type="file" class="form-control file-input-image sr-only" id="image-field1a" name="image_field1a">

            <div class="image-display-wrapper">
              <img class="image-input-image" alt="" src="images/image_placeholder.png" />
            </div>
            <label for="image-field1a" class="btn btn-icon btn-default btn-file-choose">
              <span class="glyphicon glyphicon-search"></span>
            </label>

          </div>
        </div>
      </form>