Node.js: Изображение src вызывает ошибку, повторяет инструкцию базы данных и не отображает текст alt

#node.js #database #image #express #sequelize.js

Вопрос:

Мы с моим другом пытаемся создать простой магазин электронной коммерции с помощью node, ejs, sequelize, но я заметил кое-что очень интересное. Если я попытаюсь добавить продукт с изображением src «test» или что-то еще, что не является ссылкой или недоступно, наша база данных (sequelize) повторяет инструкцию select, поскольку (я думаю) запрос на изображение (/продукт/тест) не удался (я не программировал его так, чтобы он повторно отправлял stmt в бд). Это большая ошибка, потому что затем она перезаписывает массив продуктов пустым массивом, когда оператор SELECT проверяет, ГДЕ id = «тест».

Я не знаю, почему… Пожалуйста, помогите мне, спасибо.

Вот код и ошибка:

[Журнал консоли]

 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…’ (URL-адрес изображения, который не удалось загрузить, bc без ссылки).

[Шаблон 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));
};
 

Итак, вы видите, я делаю один запрос на секвенирование, и сначала он получает продукт, но после того, как был отправлен шаблон ejs, и изображение не удалось загрузить из-за отсутствия реального URL-адреса, он повторно запустил инструкцию sequelize с ГДЕ id =’url изображения’, и поэтому он больше не мог найти продукты, поэтому продукт является пустым массивом

Итак, теперь мой вопрос в том, почему он повторяет оператор и почему он не отображает текст alt вместо того, чтобы делать новые запросы?

Заранее большое спасибо

PS: На вкладке «Сеть» я получаю: Заблокировано — ПОЛУЧИТЬ — локальный хост:3000/продукты/etsset… — img

Ответ №1:

Когда /products/4 отображается, отображается продукт с идентификатором 4 . Этот продукт существует.

На отрисованной странице вы ссылаетесь <img src="etssetsetset"> . Вы говорите, что это «нет реального URL» и «нет ссылки», но это неправда. Это совершенно верная ссылка. Это относительно текущей страницы, /products/4 поэтому она будет загружаться /products/etssetsetset .

При /products/etssetsetset отрисовке продукт не возвращается. Это приводит к ошибкам.

Тот факт, что URL-адрес не указывает на изображение, не означает, что ваш браузер не попытается его загрузить. Это совершенно прекрасная ссылка, откуда ей знать, что она указывает не на изображение, а скорее на text/html страницу (с ошибками / 404)? Если imageURL бы это было /about так, вы бы ожидали, что он попытается и не сможет отобразить вашу страницу о нас в виде изображения, верно? Тоже самое.

Вы должны проверить getProduct , не возвращает ли запрос никаких результатов. Если их нет, верните 404 и не пытайтесь отобразить страницу, потому что это приведет к сбою.

Ответ №2:

Понял. Спасибо. Решил эту проблему, создав фильтр, если URL-адрес изображения действителен.