Google Cloud StorageからSVGイメージを配信するにはどうすればよいですか？

Question

今、Google Cloud Storageを使用して自分のサイトにユーザー画像をアップロードできるようにしています。 jpg、png、gif、webpなどの通常の画像ファイルをアップロードするとうまくいきます。ただし、SVGイメージは機能しません。彼らは大丈夫ですが、PHPコードでURLを画像ソースとしてエコーすると、すべてのブラウザが欠落している画像アイコンを表示します。ただし、コードインスペクタの[ネットワーク]タブでイメージがダウンロードされているように見えます。それだけでなく、リンクをそれ自身のタブに貼り付けると、ファイルがダウンロードされます。これは、サーバーが画像として提供するのではなく、ファイルをダウンロードするようブラウザに指示していると思うようになります。私が使用しているコードは次のとおりです。

include 'GDS/GDS.php'; 
//create datastore 
$obj_store = new GDS\Store('HomeImages'); 
$bucket = CloudStorageTools::getDefaultGoogleStorageBucketName(); 
$root_path = 'gs://' . $bucket . '/' . $_SERVER["REQUEST_ID_HASH"] . '/'; 

$public_urls = []; 
//loop through all files that are images 
foreach($_FILES['images']['name'] as $idx => $name) { 
    if ($_FILES['images']['type'][$idx] === 'image/jpeg' || $_FILES['images']['type'][$idx] === 'image/png' || $_FILES['images']['type'][$idx] === 'image/gif' || $_FILES['images']['type'][$idx] === 'image/webp' || $_FILES['images']['type'][$idx] === 'image/svg+xml') { 
     //path where the file should be moved to 
     $original = $root_path . 'original/' . $name; 
     //move the file 
     move_uploaded_file($_FILES['images']['tmp_name'][$idx], $original); 

     //don't use the getImageServingUrl function on SVG files because they aren't really images 
     if($_FILES['images']['type'][$idx] === 'image/svg+xml') 
      $public_urls[] = [ 
       'name' => $name, 
       'original' => CloudStorageTools::getPublicUrl($original, true), 
       'thumb' => CloudStorageTools::getPublicUrl($original, true), 
       'location' => $original 
      ]; 
     else 
      $public_urls[] = [ 
       'name' => $name, 
       'original' => CloudStorageTools::getImageServingUrl($original, ['size' => 1263, 'secure_url' => true]), 
       'thumb' => CloudStorageTools::getImageServingUrl($original, ['size' => 150, 'secure_url' => true]), 
       'location' => $original 
      ]; 
     } 
} 
//store image location and name in the datastore 
foreach($public_urls as $urls){ 
    $image = new GDS\Entity(); 
    $image->URL = $urls['original']; 
    $image->thumbURL = $urls['thumb']; 
    $image->name = $urls['name']; 
    $image->location = $urls['location']; 
    $obj_store->upsert($image); 
} 
//redirect back to the admin page 
header('Location: /admin/homeimages'); 

Answer 1

今すぐこの問題が発生したので、私は解決策を見つけました。バケット内のすべてのファイルには、メタデータが付加され、キーと値のペアとして格納されていることがわかります。私たちが取り組んでいる鍵は「Content-Type」であり、その値はSVGにとって常に正しいとは限りません。値は 'image/svg + xml'である必要があります。プログラムで設定する方法はわかりませんが、オブジェクトがいくつかしかない場合は、バケットのオンラインインターフェイスのファイルの省略記号メニューで簡単に実行できます。