Node.js:图像 src 导致错误，重新运行数据库语句并且不显示替代文本

Question

我和我的 friend 正在尝试使用 node、ejs、sequelize 构建一个简单的电子商务商店，但我注意到一些非常有趣的事情。
如果我尝试添加带有“测试”图像 src 或其他不是链接或无法访问的产品，我们的数据库( Sequelize )会重新运行 select 语句作为(我认为)对图像的请求(/product/test)失败(我没有对其进行编程，以便将 stmt 重新发送到 db)。
这是一个很大的错误，因为当 SELECT 语句检查 WHERE id = 'test' 时，它会用空数组覆盖产品数组。
我不知道为什么...请帮帮我，谢谢。
这是代码和错误:
[控制台日志]

P--R--O--D--U--C--T: [
  product {
    dataValues: {
      id: 4,
      title: 'teset',
      price: 34234.45,
      imageUrl: 'etssetsetset',
      description: 'dfsdfsdfrtegdrdfg',
      createdAt: 2021-06-05T15:33:58.000Z,
      updatedAt: 2021-06-05T15:33:58.000Z
    },
    _previousDataValues: {
      id: 4,
      title: 'teset',
      price: 34234.45,
      imageUrl: 'etssetsetset',
      description: 'dfsdfsdfrtegdrdfg',
      createdAt: 2021-06-05T15:33:58.000Z,
      updatedAt: 2021-06-05T15:33:58.000Z
    },
    _changed: {},
    _modelOptions: {
      timestamps: true,
      validate: {},
      freezeTableName: false,
      underscored: false,
      paranoid: false,
      rejectOnEmpty: false,
      whereCollection: [Object],
      schema: null,
      schemaDelimiter: '',
      defaultScope: {},
      scopes: {},
      indexes: [],
      name: [Object],
      omitNull: false,
      sequelize: [Sequelize],
      hooks: {}
    },
    _options: {
      isNewRecord: false,
      _schema: null,
      _schemaDelimiter: '',
      raw: true,
      attributes: [Array]
    },
    isNewRecord: false
  }
]
Executing (default): SELECT `id`, `title`, `price`, `imageUrl`, `description`, `createdAt`, `updatedAt` FROM `products` AS `product` WHERE `product`.`id` = 'etssetsetset';
P--R--O--D--U--C--T: []
TypeError: Cannot read property 'title' of undefined
    at C:\Users\NULL\Desktop\05-deleting-products\controllers\shop.js:26:32

在这里你看到它首先是一个带有值的产品数组，但在图像加载失败后，stmt 重新运行 WHERE id = 'est...'(无法加载 bc 的图像 url 没有链接)
[EJS 模板]

        <main class="centered">
            <h1><%= product.title %></h1>
            <hr>
            <div class="image">
                <img src="<%= product.imageUrl %>" alt="Image">
            </div>
            <h2><%= product.price %></h2>
            <p><%= product.description %></p>
            <%- include('../includes/add-to-cart.ejs') %>
        </main>

在这里你看到我什至包含一个 alt 标签作为备份，但它不起作用它以某种方式被覆盖
[该请求处理程序的 Controller 代码]

exports.getProduct = (req, res, next) => {
    const prodId = req.params.productId;
    Product.findByPk(prodId)
        .then(product => {
            console.log('P--R--O--D--U--C--T:', product);

            res.render('shop/product-detail', {
            product: product,
            pageTitle: product.title,
            path: '/products'
        });
        })
        .catch(err => console.log(err));
};

所以你看，我提出了一个 Sequelize 请求，它首先获得了产品，但是在发送了 ejs 模板并且由于没有真实的 url 导致图像无法加载后，它重新运行了带有 WHERE id ='url of image' 的 sequelize 语句，所以它找不到产品了，所以产品是空数组
所以现在我的问题是为什么它重新运行该语句，为什么它不呈现替代文本而不是提出新请求？
首先十分感谢
PS:在网络选项卡中，我得到:Blocked - GET - localhost:3000/products/etsset... - img

Answer 1

渲染 /products/4 时，会渲染 ID 为 4 的产品。该产品存在。
在呈现的页面上，您链接 <img src="etssetsetset"> 。你说这是“没有真正的 URL”和“没有链接”，但事实并非如此。这是一个完全有效的链接。它相对于当前页面 /products/4 ，因此它将加载 /products/etssetsetset 。
呈现 /products/etssetsetset 时，不会返回任何产品。这会导致错误。
仅仅因为 URL 不指向图像并不意味着您的浏览器不会尝试加载它。这是一个非常好的链接，它怎么知道它不是指向图像，而是指向 text/html 页面(有错误/404)？如果 imageURL 是 /about，您会期望它尝试将 about-us 页面呈现为图像但失败，对吗？同样在这里。
您应该检查 getProduct 中的查询是否没有返回任何结果。如果没有，返回 404 并且不要尝试渲染页面，因为它会失败。