【发布时间】：2021-05-27 17:29:37
【问题描述】：
我正在使用 Storybook 创建一些故事并将它们发布到我们的服务器上。
我们目前使用命令build-storybook 构建静态文件。当使用命令start-storybook 指向我们构建的静态文件时，一切正常（即，svg 图标渲染良好）。
当我们将这些静态文件传输到我们用来提供这些静态文件的服务器时，就会出现问题。
我们使用以下脚本来执行此操作：
find $name -type f -exec curl --fail --silent --show-error --output /dev/null -u CREDENTIALS --ftp-create-dirs -T {} ftp-server/{} \;
仅供参考...我没有在上述脚本中公开我们的凭据或我们的 FTP 服务器。这个脚本也是从stackoverflow中获取的，它基本上允许我们将所有的静态文件文件传输到我们的服务器。
从我们的服务器提供时，SVG 图标没有加载到我们的故事中，因为它们的 MIME 类型设置为 application/octet-stream，而我们希望它们是 image/svg+xml。
在运行文件传输命令之前，我确保我们的 SVG 包含正确的 MIME 类型，即它们是 image/svg+xml。此外，在本地提供这些静态文件时，SVG 渲染良好，因此这些 svg 最初包含正确的 MIME 类型。问题发生在文件传输过程中，它以某种方式将 MIME 类型从image/svg+xml 转换为application/octet-stream。
我确保我们使用的是正确版本的 curl 即。版本 7.75，因此 svg 内容类型应为 recognized。我也尝试通过标题设置内容类型，即-H "Content-Type: image/svg+xml"，我遇到了同样的问题。
这些是我们 FTP 一个 svg 时的日志：
12:39:07 > PUT ftp-server/static/media/svg-defs.79d8a5f2.svg HTTP/1.1
12:39:07 > Host: ftp-server
12:39:07 > Authorization: Basic ****
12:39:07 > User-Agent: curl/7.75.0
12:39:07 > Accept: */*
12:39:07 > Content-Type: image/svg+xml
12:39:07 > Content-Length: 77366
12:39:07 > Expect: 100-continue
12:39:07 >
12:39:07 { [5 bytes data]
12:39:07 * Mark bundle as not supporting multiuse
12:39:07 < HTTP/1.1 100 Continue
12:39:07 } [5 bytes data]
12:39:07 * We are completely uploaded and fine
12:39:07 { [5 bytes data]
12:39:07 * Mark bundle as not supporting multiuse
12:39:07 < HTTP/1.1 201 Created
12:39:07 < Date: Thu, 27 May 2021 16:39:07 GMT
12:39:07 < Content-Type: application/****
12:39:07 < Transfer-Encoding: chunked
12:39:07 < Connection: keep-alive
12:39:07 < Server: Artifactory/6.23.13
12:39:07 < Location: ftp-server/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg
12:39:07 <
12:39:07 { [835 bytes data]
12:39:07
100 78189 0 823 100 {
12:39:07 "repo" : "****",
12:39:07 "path" : "/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg",
12:39:07 "created" : "2021-05-27T16:39:07.759Z",
12:39:07 "createdBy" : "****",
12:39:07 "downloadUri" : "ftp-server/storybook/file-loader/static/media/svg-defs.79d8a5f2.svg",
12:39:07 "mimeType" : "application/octet-stream",
12:39:07 "size" : "77366",
12:39:07 "checksums" : {
12:39:07 "sha1" : "aec79d93b48becce503b590336027b040d604214",
12:39:07 "md5" : "83db7ccd983bafa823176c1ab7444d66",
12:39:07 "sha256" : "5feb84ec671e6332e3e2441563afa737545946e0c8b89438bc92935a493294b2"
12:39:07 },
12:39:07 "originalChecksums" : {
12:39:07 "sha256" : "5feb84ec671e6332e3e2441563afa737545946e0c8b89438bc92935a493294b2"
12:39:07 }
感谢任何帮助
【问题讨论】：
-
感谢您对我的教育。我认为现在完全有道理。我们的服务器是人工制品，我刚刚读到这个：jfrog.com/confluence/display/JFROG/…。似乎我们只是没有映射到 .svg 扩展的类型，因此它默认为 application/octet-stream。
标签： svg artifactory mime-types storybook