ローカルリソースをロードすることができません

Question

現在、Web APIを使用してMVC 5プロジェクトを実行しています。ウェブapiメソッドを呼び出してイメージパスを取得するために角度js ajax呼び出しを使用していますが、imgタグでそのパスを設定すると、表示されず、ローカルリソースをロードできないクロムコンソールメッセージが表示されます。以下は

私はあなたが任意のクエリを持っているなら、私に知らせてくださいアヤックス

[Route("Files")] 
 
     public List<FilesInfo> GetImages() 
 
     { 
 
rootPath = HostingEnvironment.MapPath("~/Content/Images/"); 
 
      List<FilesInfo> files = new List<FilesInfo>(); 
 
    
 
      foreach (var item in Directory.GetFiles(rootPath)) 
 
      { 
 
       FileInfo f = new FileInfo(item); 
 
       files.Add(new FilesInfo(){FileName=f.Name, FilePath=rootPath+f.Name}); 
 
      } 
 

 
      return files; 
 
      
 
     }

を通じて呼び出す午前ウェブAPIメソッドのコードです。

Answer 1

サーバー上にHostingEnvironment.MapPathreturns the physical pathと思われます。 このパスをimgのsrc属性に追加すると、ブラウザーはローカルローカルリソースにできないと不満を表明します。

あなたはあなたのサイトへの相対値で画像へのパスを調整する必要があるだろう：/img/img1.jpg

試してみてください。

[Route("Files")] 
public List<FilesInfo> GetImages() 
{ 
    rootPath = "/Content/Images/"; 
    List<FilesInfo> files = new List<FilesInfo>(); 

    foreach (var item in Directory.GetFiles(HostingEnvironment.MapPath("~"+ rootPath);)) 
    { 
     FileInfo f = new FileInfo(item); 
     files.Add(new FilesInfo() { FileName = f.Name, FilePath = rootPath + f.Name }); 
    } 

    return files; 

} 

この方法System.IO.FileInfoは地元を持っている必要がありますパスとあなたのFilesInfoはあなたが作成するために角度で使用することができる相対URLパスを持っている必要があります：<img ng-src="{{vm.file.filePath}}" alt="{{vm.file.fileName}}" />