上传图片和重新加载页面不会以角度2

时间:2018-04-05 15:46:02

标签: angular

我尝试在上传后显示图片并重新加载页面,但出于某种原因,当我重新加载页面时,图片返回404 error (not found)。让我更好地解释你。

  1. 用户可以上传和保存图像。 此作品
  2. 用户可以在上传后看到图片。 此作品
  3. 如果由于某种原因,浏览器重新加载,则需要再次显示图像。不工作!
  4. editComponent.ts

    //Set default image
    public showChildThumb:SafeUrl = this.config.uploadFolder + this.config.defaultImgThumb;
    
    ngOnInit(){
        //get Url Param
        this.route.params.take(1)
        .map(user => {
            ... some stuff...
            return param['id']
        })
        .map(param => {
            return this.store$.select('user').takeUntil(this.ngUnsubscribe$)
            .map(user => {
                ... Some stuff ...
                if(this.editMode){
    
                    this.showChildThumb = this.sanitizer.bypassSecurityTrustUrl(this.config.uploadFolder +'/'+ user.childs[param].picture);
    
                }
    
            }).subscribe()
        }).subscribe()
    }
    

    editComponent.html

    <img [src]="showChildThumb" alt="" #imgThumb class="img-fluid">
    

    查看问题here(动画gif)

    我已经尝试向网址./assets/uploads/thumb.png?ramdomNumber添加查询,以查看是否存在缓存问题但结果相同。

    更新以下问题

    我正在使用NODE,EXPRESS,MongoDb,angularCLI,angular 2 +

    我正在使用ng2-file-upload模块在​​节点中上传图片和multer模块。

    上传,保存和存储图像的所有过程都正常。

    正如我在运行应用程序时所提到的,图像显示,并且URL是

    <img _ngcontent-c13="" alt="" class="img-fluid" src="blob:http://localhost:4200/3c36e668-2cfb-403f-a2a1-4095e6f42975"> 
    

    但当我上传然后重新加载页面时,响应为404错误

    任何帮助?

    链接以查看更新的问题(Youtube)

    提前感谢。

0 个答案:

没有答案