更改文件夹中的图像不反映浏览器中的更改

我在做什么:

我正在使用mongodb数据库,nodejs和angular4显示图像文件中的图像。图像显示正常。

问题:

我正在显示的图像的path是assets/Images/1.jpg 。 这个path来自数据库。

现在,我去文件夹assets/Images并删除1.jpg。 然后我上传一个新的图像到这个文件夹,然后我把这个新上传的图像重命名为1.jpg。

但浏览器仍然显示旧图像。

我试过的:

我试图刷新浏览器选项卡。 但仍然是显示旧图像。

所以,正如在这篇文章中提到的 ,我尝试了empty cache and hard reload 。 浏览器仍在显示旧的图像。

然后我重新启动服务器。 和预期的浏览器显示我新的形象。

我想要的是:

我希望浏览器在我复制粘贴新图像后立即向我显示已更改的图像,删除旧图像并重新命名新图像。

如果突然改变是不可能的,那么我希望浏览器在页面以编程方式刷新时显示新的图像。

重现问题的示例

您可以通过以下链接下载示例: https : //drive.google.com/file/d/0B5WyqSALui0bekJhTGtudWNOd28/view?usp=sharing

如何使用示例运行应用程序

  1. 从上述链接下载示例文件。
  2. 解压文件。
  3. 打开混帐bash或terminal,并导航到image-sample文件夹
  4. 运行npm install命令。
  5. 安装依赖关系后, cd node-files ,然后cd seed
  6. 运行node image-seeder命令。 这将在mongodb中创build一个示例数据库,然后插入示例数据。
  7. 运行cd ..两次来到原来的文件夹,然后
  8. 通过npm start运行应用npm start
  9. 打开浏览器并在地址栏中inputlocalhost://3000 。 你应该看到图像。
  10. 现在浏览src / assets / Images文件夹
  11. 删除1.jpg
  12. 将2.jpg重命名为1.jpg,然后查看浏览器。 图像不会被改变。
  13. 刷新浏览器窗口。 仍会显示旧图像。
  14. 重新启动服务器,然后您可以看到更改的图像。

代码和说明

首先,我使用创buildangular度的应用程序

 ng new image-sample 

然后我在package.json中添加了一些依赖关系,如下所示:

 "body-parser": "^1.17.1", "cookie-parser": "^1.4.3", "core-js": "^2.4.1", "express": "^4.15.2", "fs": "0.0.1-security", "mongoose": "^4.9.9", "morgan": "^1.8.1", "path": "^0.12.7" 

我也改变了脚本如下:

 "scripts": { "ng": "ng", "start": "npm run serve-build", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "build:nodeserver": "ng build && cp nodeserver/* dist", "build:nodeserver-prod": "ng build -prod && cp nodeserver/* dist", "serve-build": "npm run build:nodeserver && cd dist && node server.js", "serve-build-prod": "npm run build:nodeserver-prod && cd dist && node server.js" }, 

然后我使用以下方法安装这些依赖项

 npm install 

然后我在image-sample目录下创build了一些文件夹和文件,如下所示:

 nodeserver |-- server.js node-files |--models |-- db.js |-- Image.js |--api |-- image.js |--seed |-- image-seeder.js 

以下是上述文件的内容:

nodeserver / server.js

 var express = require('express'); var morgan = require('morgan'); var bodyParser = require('body-parser'); var cookieParser = require('cookie-parser'); var path = require('path'); var fs = require('fs'); require('../node-files/models/db'); var image = require('../node-files/api/image'); var app = express(); var staticRoot = __dirname + '/'; app.set('port', (process.env.PORT || 3000)); app.use(express.static(staticRoot)); app.use(morgan('dev')); app.use(bodyParser.json()); app.use(cookieParser()); app.use(function(req, res, next){ // if the request is not html then move along var accept = req.accepts('html', 'json', 'xml'); if(accept !== 'html'){ return next(); } // if the request has a '.' assume that it's for a file, move along var ext = path.extname(req.path); if (ext !== ''){ return next(); } fs.createReadStream(staticRoot + 'index.html').pipe(res); }); app.use('/api/image', image); app.listen(app.get('port'), function() { console.log('app running on port', app.get('port')); }); 

节点的文件/模型/ db.js

 var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/sampleimagedb') 

节点的文件/模型/ Image.js

 var mongoose = require('mongoose'); var Schema = mongoose.Schema; var imageSchema = new Schema({ url: {type: String, required: true}, width: {type: Number, required: true}, height: {type: Number, required: true} }); var Image = module.exports = mongoose.model('Image', imageSchema); module.exports.getAllImages = function(callback){ Image.find().lean().exec(function(err, images){ if (err) return callback(err, null); callback(null, images); }); }; 

节点的文件/ API / image.js

 var express = require('express') var router = express.Router(); var Image = require('../models/Image'); router.get('/', function(req, res, next) { Image.getAllImages(function(err, images) { if(err) { return res.status(400).json(err); } else { res.status(200).json(images); } }); }); module.exports = router; 

节点的文件/种子/图像seeder.js

 var Image = require('../models/Image'); var mongoose = require('mongoose'); mongoose.connect('localhost:27017/sampleimagedb'); var images = [ new Image({ url: 'assets/Images/1.jpg', width: 300, height: 200 }) ]; var done = 0; for(var i = 0; i < images.length; i++) { images[i].save(function(err, result){ done++; if(done == images.length){ exit(); } }); } function exit() { mongoose.disconnect(); console.log(images.length + ' Image(s) added to the database'); } 

然后在angular度上,我在src/app下创build了一个名为models的文件夹。 我在其中添加Image.ts文件,如下所示:

 export class Image { url: string; height: number; width: number; constructor(url: string, height: number, width: number) { this.url = url; this.height = height; this.width = width; } } 

我在src/app文件夹里创build了一个services文件夹。 然后我使用angular-cli工具在services文件夹中添加了一个名为ImageService的服务,如下所示:

 ng g service image 

这会生成两个文件,其中一个是image.service.ts ,其格式如下所示:

 import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/Rx'; import { Image } from '../app.component'; @Injectable() export class ImageService { constructor(private http:Http) { } public image: Image getImages(): Observable<Image[]> { return this.http.get('/api/image') .map(res => res.json()); } } 

然后我在app.module.ts的提供者部分添加了这个服务,如下所示:

 providers: [ImageService], 

然后在app.component.ts文件中调用ImageService ,如下所示:

 import { Component, OnInit } from '@angular/core'; import { ImageService } from './services/image.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ images: Image[]; ngOnInit() { this.imageService.getImages() .subscribe( response => this.images = response, error => console.log(error) );; } constructor(private imageService: ImageService) { } } 

最后在app.component.html

 <div *ngFor="let image of images"> <img [src]="image.url" style="left:0px;top:0px;" [style.width.px]="image.width" [style.height.px]="image.height"/> </div> 

你的问题是其他。

您正在运行ng构build器,并将输出设置为/ dist,然后将您的静态文件复制到dist文件夹,然后必须更改image-sample / dist / assets / images中的图像。 尝试做这个文件夹的testing,它会起作用。

你的问题是关于构build,你必须观察在/ src上更改的文件,并且必须在更改后再次运行构build任务,或者可以更改dist上的文件,但是我不build议这样做,因为构build运行时再次,dist上的文件被覆盖。

所以你必须改善你的任务跑步者和构build过程,以更好地使你的应用程序工作。