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

Question

我和我的朋友正试图用node、ejs、sequelize建立一个简单的电子商务商店，但我注意到了一些非常有趣的事情。如果我试图添加一个image src为"test"的产品或其他无法链接或无法访问的产品，我们的数据库(sequelize(会重新运行select语句，因为(我认为(对该图像(/product/test(的请求失败了(我没有对其进行编程，以便它将stmt重新发送到数据库(。这是一个大错误，因为当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:UsersNULLDesktop5-deleting-productscontrollersshop.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标签作为备份，但它不起作用，它也被覆盖了

[请求处理程序的控制器代码]

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，图像加载失败，它重新运行了sequelize语句，其中WHERE id="url of image"，所以它再也找不到产品了，所以产品是空数组

所以现在我的问题是，为什么它要重新运行语句，为什么不呈现alt文本而不是发出新的请求？

提前非常感谢

PS：在网络选项卡中，我得到：Blocked-get-localhost:3000/products/etset…-img

Answer 1

渲染/products/4时，将渲染ID为4的产品。此产品存在。

在渲染的页面上，链接<img src="etssetsetset">。你说这是"没有真正的URL"one_answers"没有链接"，但事实并非如此。这是一个非常有效的链接。它相对于当前页面/products/4，因此它将加载/products/etssetsetset。

渲染/products/etssetsetset时，不会返回任何产品。这会导致错误。

URL不指向图像并不意味着你的浏览器不会尝试加载它。这是一个非常好的链接，它怎么知道它不指向图像，而是指向text/html页面(一个有错误的页面/404(？如果imageURL是/about，您会期望它尝试并失败将您的about us页面呈现为图像，对吧？这里也是。

您应该检查getProduct中的查询是否没有返回任何结果。如果没有，返回404，不要尝试呈现页面，因为它会失败。

Answer 2

收到了。谢谢。如果图像url有效，则通过制作过滤器来解决此问题。