SilverStripe не отображает изображение

Question

Я изучаю SilverStripe, разрабатывая простой проект. Теперь у меня проблема с отображением изображений в файле шаблона.

Это мой BlogPage.php

<?php

namespace {

    use SilverStripe\AssetAdmin\Forms\UploadField;
    use SilverStripe\Assets\Image;

    class BlogPage extends Page
    {
        private static $can_be_root = false;

        private static $has_one = [
            'Banner' => Image::class,
        ];

        public function getCMSFields()
        {
            $fields = parent::getCMSFields();
            $fields->addFieldToTab('Root.Attachments', $banner = UploadField::create('Banner'));
            $banner->setFolderName('banners');

            return $fields;
        }
    }
}

Я могу загрузить изображение баннера внутри панели администратора. Я пытаюсь отобразить изображение в BlogPage.ss следующим образом.

<% with $Banner.ScaleWidth(750) %>
    <img class="my-custom-class" src="$URL" alt="" width="$Width" height="$Height" />
<% end_with %>

Но это ничего не отображает. Когда я проверяю URL в консоли, это (неизвестно). Что случилось? Как я могу отобразить изображение?

Редактировать

Я отредактировал вопрос в соответствии с ответом Робби ниже.

Это мой BlogPage.php

<?php

namespace {

    use SilverStripe\AssetAdmin\Forms\UploadField;
    use SilverStripe\Assets\Image;

    class BlogPage extends Page
    {
        private static $can_be_root = false;

        private static $has_one = [
            'Banner' => Image::class,
        ];

        private static $owns = [
            'Banner',
        ];

        public function getCMSFields()
        {
            $fields = parent::getCMSFields();
            $fields->addFieldToTab('Root.Attachments', $banner = UploadField::create('Banner'));
            $banner->setFolderName('banners');

            return $fields;
        }
    }
}

Это мой BlogPage.ss

<% with $Banner %>
    <img class="my-custom-class" src="$URL" alt="" width="$Width" height="$Height" />
<% end_with %>

<h3>$Title</h3>

$Content

Answer 1

Метод ScaleWidth() фактически вернет вам полный тег изображения, поэтому вам не нужно указывать ширину, высоту и т. Д. Вы можете сделать это:

$Banner.ScaleWidth(750)

Если вы хотите визуализировать изображение самостоятельно, вы можете удалить часть .ScaleWidth(). Структура with меняет область действия с текущей области (предположительно страницы) на отношение или модель $Banner, возвращаемую Banner() или getBanner() в вашей модели или контроллере, поэтому вызовы переменных внутри нее находятся внутри баннера. Объем.

<% with $Banner %>
    <img class="my-custom-class" src="$URL" alt="" width="$Width" height="$Height" />
<% end_with %>

Также обратите внимание, что файлы и изображения по умолчанию имеют версии в SilverStripe 4. Это означает, что при публикации вашей страницы прикрепленное к ней изображение не будет автоматически опубликовано и не будет отображаться на вашем веб-интерфейсе. , Вы можете сообщить SilverStripe, что вашей странице «принадлежат» загружаемые вами изображения, и они будут автоматически опубликованы вместе со страницей:

// On your page:
private static $owns = ['Banner'];