直到我重新编译我的应用程序（angular2、typescript、nodejs）才加载图像

Question

我正在尝试存储图像并在我的应用程序中检索它。在检索时存储图像非常有效（存储在特定的服务器路径中），图像不会加载到浏览器中，直到我重新编译通过nodejs 完成的angular2 应用程序。下面是检索图像的代码。

     <div class="row" *ngFor="let map of _selectedMaps;let index3 = index;trackBy:trackByIndex;" >
             <div class="col-md-1">{{map.id}}</div>
...
             <div class="col-md-1"><img class="media-icon" [attr.src]='selectedMapUrl(map)' />  
             <input type="file" id="fl{{index3}}" class="inputfile" (change)="mapChange($event, map)" placeholder="Upload map" accept=".png,.gif,.jpeg,.jpg"  />
             <label [attr.for]="'fl'+index3" >Load ...</label>
    </div>

。 selectedMapUrl(map) 是生成 URL 的方法（URL 生成正确）。我附上了一些网络和浏览器源存储的屏幕截图。

我只是想知道发生了什么，如果我重新编译我的应用程序，将会加载 12600.png。 我观察到，每当我重新编译应用程序时，浏览器都会重新加载并且 webpack 也会重新加载。 谁能帮我解决。 谢谢...

Answer 1

发生这种情况是因为当您上传图片时，它会在 project/src/assets/maps 中上传，但您的应用程序正在从 dist 文件夹中获取内容，这就是图片没有出现的原因无需编译..

因为图像进入应用程序的 project/src/assets/maps 文件夹而不是 project/dist/assets/maps 文件夹（应用程序使用内容的位置)。

编译后的图像移动到 dist/assets/map，这就是图像开始出现在应用程序上的原因，应用程序在编译后使用 dist 文件夹的内容。这就是重新编译应用程序后出现图像的原因。

因此，最好将图像文件与 project/src/assets/map 文件夹一起上传到 dist/assets/map 文件夹中。 这样图像将开始出现而无需编译。

var dir  = "src/assets/map";
var distdir ="dist/assets/map";

// image upload code for both locations
if (!fs.existsSync(dir)){
                    fs.mkdirSync(dir,0775, function(err){
                        if(err){
                            fs.mkdirSync(dir);
                        }
                    });
                }
if (!fs.existsSync(distdir)){
           fs.mkdirSync(distdir,0775, function(err){
                        if(err){
                            fs.mkdirSync(distdir);
                        }
                    });
                }

fs.writeFile(dir+"/"+fileName, imageBuffer, {encoding:'utf8'}, function(err) {
                    if(err)
                        console.log(err);
                });

fs.writeFile(distdir+"/"+fileName, imageBuffer, {encoding:'utf8'}, function(err) {
                    if(err)
                        console.log(err);
                });

编译后也能维护镜像。

谢谢！