Question

我的Angular4应用程序有问题，我已经制作了整个上传文件系统并且它正常工作但是当我上传图像并刷新页面时，图像并没有改变

这里是img标签

<img  class="img-thumbnail img-responsive" src="../../../assets/img/profile/{{user.img}}" width="300px" height="300px">

user.img是数据库中的字符串。

组件文件

＆＃13;

import { Component, OnInit } from '@angular/core';
import { FormControl,FormGroup,FormBuilder,Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { FileUploader ,FileSelectDirective} from 'ng2-file-upload';

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.css']
})
export class EditProfileComponent implements OnInit {

	editForm;
  messageClass;
  message;
  user;
  birthday;
  bYear; // cut the date to fit the select tag
  bMonth;
  bDay;
  
  public uploader: FileUploader= new FileUploader({url:'http://localhost:8080/authentication/edit-photo',headers:[{name:'authorization',value:this.authService.authToken}]});

ngOnInit() {
    this.authService.getProfile().subscribe(data=>{
      this.user=data.user;
      this.birthday=new Date(this.user.birthday);
      this.bMonth=this.birthday.getUTCMonth() + 1;
      this.bYear=this.birthday.getUTCFullYear();
      this.bDay=this.birthday.getUTCDate();
      
    });

＆＃13;

我已经尝试了很多方法，但还没有一种方法可以使用。你有什么建议？

修改

我注意到，当我在代码编辑器中保存文件时，图像会发生变化，但刷新浏览器后却没有。

我还想指定上传的所有图像都放在angular的src文件夹中的资源文件夹中，因为当它们在angular目录之外时我无法访问它们。也许这就是为什么在保存文件之前它没有改变的原因？因为ng服务重新加载？我需要帮助吗

Answer 1

我遇到了同样的问题，这是缓存问题。我在Ror＆amp; angular网站上测试了它。默认情况下，图像数据缓存存在2天您是否曾在文件浏览器（Finder）中更改过图像？我删除了缓存，效果很好。如果您不想删除缓存，可以在隐身窗口中完成代码，并在2天后测试最终操作。

Answer 2

您不希望将ng serve用作生产版本，它使用的webpack开发服务器仅用于开发。您想使用ng build并通过nginx，apache或其他一些服务器软件提供index.html文件。这是https://github.com/angular/angular-cli/issues/5274

的简短论坛

webpack dev-server在本地虚拟内存中创建构建。因此，当您更新资产文件夹时，您必须重新启动服务，以便webpack dev-server具有更新的资产。

使用ng build时，这不会成为问题，因为应用程序＆amp; assets文件夹将在同一台服务器上提供。

上传图像在刷新后不会更改，但在文本编辑器中保存后会更改

2 个答案: