Question

我正在创建一个角度元素，应该将其嵌入多个外部站点中。

嵌入过程将仅是对已编译脚本的引用以及代表该元素的DOM元素：

public class Settings
{
    Settings(Func<Owned<DbContext>> contextFactory)
    {
        this._contextFactory = contextFactory;
    }
    private readonly Object _lock = new Object();
    private readonly Func<Owned<DbContext>> _contextFactory;

    private Boolean _isSettingsLoaded = true;
    private Int32 _settingsA;

    public Int32 SettingsA
    {
        get
        {
            this.EnsureSettingsLoaded();
            return _settingsA;
        }
    }


    private void EnsureSettingsLoaded()
    {
        if (!this._isSettingsLoaded)
        {
            lock (this._lock)
            {
                if (!this._isSettingsLoaded)
                {
                    using (Owned<DbContext> context = this._contextFactory())
                    {
                        // context.Value.DoSomething(); 
                    }
                    this._isSettingsLoaded = true;
                }
            }
        }
    }
}

但是问题在于元素使用了.png，.svg，.gif和.jpg格式的一些资产。

当然，在其他站点上使用的已编译元素无法引用这些资源。

有关角度元素的文档非常有限，甚至Angular Docs都没有对此发表任何意见。

实现此目标的最佳方法是什么？我见过有人将资源转换为数据并以这种方式呈现。

Answer 1

创建完全独立的组件的最佳方法是使用DATA URI将图像嵌入到组件中。

代替此：

<img src="http://www.example.com/image.jpg"/>

您将图像文件编码为文本格式，例如Base64，然后在src属性中使用该文本数据：

<img src="data:image/png;base64,your-base-64-encoded-image-data" />

更多详细信息在这里： https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml

这确实增加了组件的大小，但它是独立的，可以移植到其他应用程序中，而无需将图像作为单独的文件包含在内。

SVG文件已经是文本了，但是它们是基于XML的，因此您只需URL编码文件，而无需Base64编码。这样会产生较小的数据块。

您可以在* nix机器上运行Base64命令：

base64 -i "myimage.jpg"

或：

base64 -i "myimage.jpg" -o "base64.txt"

或使用在线转换器：

如何在角度元素中使用图像

1 个答案: