Question

我在做什么：

我正在使用mongodb数据库，nodejs和angular 4显示图像文件中的图像。图像显示良好。

问题：

我展示的图片路径为assets/Images/1.jpg。此路径来自数据库。

现在，我转到文件夹assets/Images并删除1.jpg。然后我将新图像上传到此文件夹，然后将新上传的图像重命名为1.jpg。

但是浏览器仍在显示旧图像。

我尝试了什么：

我尝试刷新浏览器标签。但它仍然显示旧图像。

因此，正如this post中提到的，我尝试了empty cache and hard reload。浏览器仍在显示旧图像。

然后我重新启动了服务器。正如预期的那样，浏览器会向我显示新的图像。

我想要的是什么：

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

如果无法进行突然更改，那么我希望浏览器在以编程方式刷新页面时显示新图像。

重现问题的样本

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

如何使用示例运行应用

从上述链接下载示例文件。
解压缩文件。
打开git bash或终端并导航到image-sample文件夹
运行npm install命令。
安装依赖项后，cd node-files，然后cd seed
运行node image-seeder命令。这将在mongodb中创建一个示例数据库，然后插入样本数据。
运行cd ..两次以进入原始文件夹然后
按npm start
打开浏览器并在地址栏中输入localhost://3000。你应该看到图像。
现在浏览src / assets / Images文件夹
删除1.jpg
将2.jpg重命名为1.jpg，然后查看浏览器。图像不会被更改。
刷新浏览器窗口。将显示旧图像。
重新启动服务器，然后您可以看到更改后的图像。

代码和说明

首先我使用

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目录中创建了一些文件夹和文件，如下所示：

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');
}

然后在角度方面，我在models下创建了一个名为src/app的文件夹。我在其中添加了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;
    }
}

我在services文件夹中创建了一个src/app文件夹。然后我使用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>

Answer 1

你的问题是其他的。

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

您的问题是关于构建，您必须在/ src上查看已更改的文件，并且必须在更改后再次运行构建任务，或者您可以更改dist上的文件，但我不建议这样做，因为当再次运行build，dist上的文件被覆盖。

因此，您必须更好地完成任务运行程序和构建过程，以便更好地运行应用程序。

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