Question

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

     <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，这就是图像开始出现在应用程序上的原因，Application在编译后使用了dist文件夹的内容。这就是重新编译应用程序后出现图像的原因。

因此最好在dist / assets / map文件夹中上传图像文件以及project / src / 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);
                });

它也在编译后保留图像。

谢谢！

在我重新编译应用程序之前图像没有加载（angular2，typescript，nodejs）

1 个答案: