参考:未定义图像

Question

我正在尝试制作一个网站，其中我通过链接包含图像。如果图像不存在，或者仅1像素宽，则该网站应显示替代图像。我正在使用Jade/Pug和JS。

我尝试事先列出链接列表，然后再在网站上渲染它们。这样一来，我就可以迭代以后将我的链接列表扔在.pug文件中。因此，我要做的是检查图像是否具有一定尺寸，仅使用JS。如果确实如此，我将链接添加到我的列表中，如果不是，则添加了替代链接。

这是我在app.js-file中代码的重要部分：

app.get("/", function (req, res) {
    //get all the books
    var isbns = [];
    var links = [];
    dbClient.query("SELECT isbn FROM book WHERE id < 20", function (dbError, dbItemsResponse){
        isbns = dbItemsResponse.rows;
        var linkk = 0;
        for(i=0;i<20;i++){
            linkk = "http://covers.openlibrary.org/b/isbn/" + Object.values(isbns[i]) + "-M.jpg";
            var wid = getMeta(linkk);
               if(wid < 2){
                    links[i]="https://i.ibb.co/7JnVtcB/NoCover.png";
                } else {
                    links[i]=linkk;
                }
            }
    });
});
function getMeta(url){   
    var img = new Image(); //or document.createElement("img");
    img.onload = function(){
        alert(this.width);
    };
    img.src = url;
}

这给我一个参考：image((未定义。如果我尝试使用document.createelement(" img"(;它说"未定义的文档"。如果存在图像，如何检查服务器端？还是如何在我的app.js文件中使用映像构造人？不以任何方式使用我的Jade/Pug/HTML文件。对不起，如果这是一个愚蠢的问题，但是我想从20个小时以来就试图弄清楚这一点，而我无法正常工作。

Answer 1

您正在混合nodejs和javascript。您的代码为nodejs，因此在Sererside上。window和Image仅在浏览器中可用。在客户端。

用于检查文件是否存在，(仅在Serveride！=(您可以使用fs =＆GT;fs.Access。

var fs = require("fs");
// Check if the file exists in the current directory.
fs.access(file, fs.constants.F_OK, (err) => {
  console.log(`${file} ${err ? 'does not exist' : 'exists'}`);
});

注意

问愚蠢的问题，直到你变得聪明。好方法。

Answer 2

对于价值，Canvas NPM软件包允许您根据需要使用图像构造函数。我发现这是必不可少的情况，例如在服务器端图像处理中。

https://www.npmjs.com/package/canvas

npm install canvas

import { Image } from "canvas";
const img = new Image;