首页 > 解决方案 > Django:服务 SVG

问题描述

在我的 Django 项目中,我有一个 JS 库,它也使用 SVG 作为图标。这些文件位于 S3 存储桶中——这意味着不在我自己的域中。当 JS 启动时,它会尝试加载 SVG 图标并在 Chrome 中引发浏览器错误:

Unsafe attempt to load URL https://s3.amazonaws.com/<mydomain.com>/static/pixie/assets/icons/merged.svg
from frame with URL 
<mydomain.com>/images/pixie/dcfcf90e-d4fa-4bde-bb6b-6cebe00e6d7a/. 
Domains, protocols and ports must match.

有没有办法直接从我的项目中提供这些 SVG?

如果 SVG 是从我自己的域中提供的,例如。<mydomain.com>/svgs/merged.svg,那么我认为“不安全的加载尝试”错误将得到解决。

具体来说,在 .js 文件中

return t.prototype.ngOnInit = function() {
                        this.path = this.settings.getAssetUrl("icons/merged.svg") + "#" + this.name, this.renderer.addClass(this.el.nativeElement, ("icon-" + this.name).replace(/ /g, "-"))
                    }, t

标签: djangosvgamazon-s3django-staticfiles

解决方案


我想到了。将 URL 指向视图:

def svgview(request):
    file = open('/app/<app_name>/static/pixie/assets/icons/merged.svg', 'rb')
    response = HttpResponse(content=file)
    response['Content-Type'] = 'image/svg+xml'
    return response

推荐阅读