SilverStripe未显示图像

Question

I am learning SilverStripe by developing a simple project. Now I am having a problem with displaying images in the template file.

This is my 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;
        }
    }
}

I can upload the banner image inside the Admin panel. I am trying to display the image in the BlogPage.ss like this.

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

But it is not displaying anything. When I inspect the URL in the console, it is (unknown). What is wrong? How can I display the image?

Edit

I edited question according to Robbie's answer below.

This is my 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;
        }
    }
}

This is my BlogPage.ss

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

<h3>$Title</h3>

$Content

Answer 1

The ScaleWidth() method will actually return a full image tag for you, so you don't need to specify width, height, etc. You can do this:

$Banner.ScaleWidth(750)

If you want to render the image yourself, you can remove the .ScaleWidth() part. The with structure changes the scope from the current scope (presumably a page) to the $Banner relationship or model returned by Banner() or getBanner() in your model or controller, so then variable calls within it are within the banner's scope.

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

Also, note that files and images are versioned by default in SilverStripe 4. This means that when you publish your page, the image you've attached to it won't be automatically published and won't show up on your frontend. You can tell SilverStripe that your page "owns" the images you upload, which will auto-publish them with the page:

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