新上传的照片出现 404 错误。如果我停止然后运行网站，图像会加载

Posted 2023-03-25

【中文标题】新上传的照片出现 404 错误。如果我停止然后运行网站，图像会加载

【英文标题】：Newly uploaded photo giving 404 error. If I stop then run website, image loads

【发布时间】：2021-12-19 16:03:44

【问题描述】：

我们正在尝试在我们的网站上创建一个照片库。我们在管理端有一个上传组件，在客户端有一个照片库。我们能够将照片上传到我们的网站，并且目前将它们存储在我们网站资产的文件夹中。当我们上传新照片时，退出管理门户，然后尝试查看图库中的照片，新上传的照片给我们一个错误：GET https://localhost:5001/assets/PhotoGallery/DarkSide.jpg 404即使我们能够在控制台中将文件的路径显示为文本并且它是正确的路径。

如果我们停止网站运行，然后再次启动，照片将显示。我们不确定为什么会发生这种情况，但我们将不胜感激。谢谢。

photos.component.ts

catcher: any[];
  photos: string[] = [];


  async ngOnInit() 
    await this.http.get<any[]>(this.baseUrl + 'api/imageUpload').subscribe(result => 
      this.catcher = result;
      this.setPhotos(result);
      console.log(result);
    , error => console.error(error));
  

  setPhotos(newArray: any[]) 
    var temp: string = ""
    newArray.forEach(path => 
      this.photos.push("..\\" + path.trim())
    );
  

imageUploadController.cs

private IHostingEnvironment _hostingEnvironment;
        private string fPath = "";
        public imageUploadController(IHostingEnvironment hostingEnvironment)
        
            _hostingEnvironment = hostingEnvironment;
            SetFullPath(_hostingEnvironment.ContentRootPath + "\\ClientApp\\src\\assets\\PhotoGallery");
        

[HttpGet, DisableRequestSizeLimit]
        public List<string> GetImagePaths()
        
            try
            
                List<string> paths = new List<string>();
                string startRelPath = "assets";
                foreach (var path in Directory.GetFiles(fPath))
                
                    int relPathStartIndex = path.IndexOf(startRelPath);
                    string newPath = path.Substring(relPathStartIndex);
                    Console.WriteLine(newPath);
                    paths.Add(newPath);
                
               return paths;
            
            catch(Exception e)
            
                Console.WriteLine("Fail");
                return null;
            
        

private void SetFullPath(string path)
        
            this.fPath = path;
        

photos.component.html

<div *ngIf="photos?.length">
    <div *ngFor="let photo of photos">
        <img src="photo"/>
    </div>
</div>

【参考方案1】：

我最终通过使用 S3 存储桶解决了这个问题，我意识到一旦将我的网站放在服务器上，我将无法再访问文件路径来存储照片。我为解决我的问题而遵循的教程在这里：

Part 1: https://youtu.be/ynhgDYVQTEI
Part 2: https://youtu.be/hJFxhVpA9To
Part 3: https://youtu.be/eRUjPrMMhCc