在使用Ember的新Glimmer组件之前，我使用了didInsertElement生命周期钩子来计算图像元素的自然宽度。我传递了一个目标宽度，以便在浏览器中调整图像的大小。

didInsertElement() {
    this._super(...arguments);
    if (this.targetWidth && this.targetWidth < this.element.naturalWidth) {
        this.targetHeight = Math.round(this.targetWidth / this.element.naturalWidth * this.element.naturalHeight);
        set(this, 'width', this.targetWidth);
        set(this, 'height', this.targetHeight);
    }
    else {
        set(this, 'width', this.naturalWidth);
        set(this, 'height', this.naturalHeight);
    }

对于Glimmer组件，并使用@ember/render-modifier，由父级传入的src：

<img {{did-insert this.calculateDimensions}} src={{@src}} width={{this.width}} height={{this.height}}>

在组件JS文件中

@action
calculateDimensions(element) {
    if (this.args.targetWidth && this.args.targetWidth < element.naturalWidth) {
        this.height = Math.round(this.args.targetWidth / element.naturalWidth * element.naturalHeight);
        this.width = this.args.targetWidth;
    }
    else {
        this.width = element.naturalWidth;
        this.height = element.naturalHeight;
    }
    element.setAttribute("width", this.width);
    element.setAttribute("height", this.height);
}

如果您重新加载索引/主页，这一切都可以正常工作。但是，当您第一次到达站点时，图像没有呈现，因为element.naturalWidth的值为零。元素存在，如果将其记录到控制台，我可以看到自然宽度和高度的值。ember-render-modifier {{did-insert}}不是didInsertElement的完全替代吗？
任何帮助都不胜感激。