Displaying Images

Basic

Displaying images is extremely simple, and does not take much explaining. Perhaps of the three actions to take of the image, this is the most simple. All you must do is append the id of the image to the images.php file to make the source for the image. The easiest way to do this (assuming, you followed the steps properly in the setup portion) is to use the config property. There are two simple steps to get this working.

In the Javascript file, all you must do is inject the config service to make it available for use in the handlebars. For example:

import Component from '@ember/component';
import {inject as service} from '@ember/service';

export default Component.extend({
    config: service()
});

Then in the handlebars file, all you need to do is join the id (model.image in example) with the path from config. For example:

{{#if model.image}}
    <img src="{{config.imagePath}}/{{model.image}}">
{{/if}}

Displaying with Delete Button

While it is not difficult to figure out how to display a delete button underneath an image, because we use several classes typically to make them look a certain way, I will just show that here (for detail on partiallyDeleteImage, see deleting images):

{{#if model.image}}
    <div class="col-sm-6 col-md-3 col-lg-3">
        <div class="thumbnail">
            <img src="{{config.imagePath}}/{{model.image}}" alt="{{model.image}}" />
            <div class="caption">
                <button class="btn btn-block btn-danger btn-sm"
                    {{action 'partiallyDeleteImage' model.image}}
                >
                    <i class="far fa-trash-alt"></i>
                    Delete
                </button>
            </div>
        </div>
    </div>
{{/if}}

Clearly, though, the only absolutely essential part to display an image is the actual image source, and the rest is able to be adjusted as you see fit.