错误：为什么我无法在前端显示图像？

Question

我正在尝试的是从mysql获取图像和数据并将其作为json发送到前端并以html显示内容，在mysql中我有图像的路径并用fs将其打印出来，正如您在代码中看到的那样，问题就在图像中，我无法显示它，

节点js代码：

class Admin {
async readImagePath(filePath){
    let path = filePath;
    return new Promise((resolve, reject) => {
       // Read the image file
       fs.readFile(path, (err, data) => {
        if (err) {
          reject(err)
        } else {
          resolve(data);
        }
      });
    })
  }
}
app.get("/browseProduct", async (req, res) => {
  try {
    let admin = new Admin();
    let orderBy = req.body.orderBy;
    let chefID = req.body.chefID;

    //save the result from DB
    let browseProductResult = await admin.browseChefProduct(orderBy, chefID);
   
    //replace the product photo path with real image
    for (let i = 0; i < browseProductResult.length; i++) {
      let filePath = browseProductResult[i].productPhotoPath;
      browseProductResult[i].image = await admin.readImagePath(filePath);
    }
    res.status(200).json({browseProductResult})
  } catch (err) {
    console.log(err);
    res
      .status(400)
      .json({
        message:
          "خطأ غير معروف الرجاء التواصل مع الدعم الفني للابلاغ عن المشكلة 779593216",
      });
  }
});

前端代码：

// save result from server
let products;

//function of cretae card
function createCardInHtml(image, name, ID, price, description, rate){
 // Create the outermost <div> element with class "products"
 const productsDiv = document.createElement('div');
 productsDiv.classList.add('products');
 
 // Create the <div> element with class "main"
 const mainDiv = document.createElement('div');
 mainDiv.classList.add('main');
 
 // Create the <ul> element with class "cards"
 const ulElement = document.createElement('ul');
 ulElement.classList.add('cards');
 
 // Create the <li> element with class "cards_item"
 const liElement = document.createElement('li');
 liElement.classList.add('cards_item');
 
 // Create the <div> element with class "card"
 const cardDiv = document.createElement('div');
 cardDiv.classList.add('card');
 
 // Create the <div> element with class "card_image" and the <img> element
 const cardImageDiv = document.createElement('div');
 cardImageDiv.classList.add('card_image');
 const imageElement = document.createElement('img');
 imageElement.innerHTML= image;
 imageElement.alt = 'the image here';
 cardImageDiv.appendChild(imageElement);
 
 // Create the <div> element with class "card_content"
 const cardContentDiv = document.createElement('div');
 cardContentDiv.classList.add('card_content');
 
 // Create the <h2> element with class "card_title" for the product name
 const productNameHeading = document.createElement('h2');
 productNameHeading.classList.add('card_title');
 productNameHeading.textContent = 'الاسم : '+name;
 
 // Create the <h4> element with class "card_title" for the product ID
 const productIdHeading = document.createElement('h4');
 productIdHeading.classList.add('card_title');
 productIdHeading.innerHTML = 'معرف المنتج : '+ID;
 
 // Create the <div> element with class "card_text" for the product details
 const cardTextDiv = document.createElement('div');
 cardTextDiv.classList.add('card_text');
 
 // Create <p> elements for the product details
 const priceParagraph = document.createElement('p');
 priceParagraph.textContent = 'السعر : '+price;
 
 const descriptionParagraph = document.createElement('p');
 descriptionParagraph.textContent = 'الوصف : '+description;
 
 const ratingParagraph = document.createElement('p');
 ratingParagraph.textContent = 'التقييم : '+rate;
 
 // Create the "تقييم" button
 const ratingButton = document.createElement('button');
 ratingButton.textContent = 'تقييم';
 
 // Append the elements to construct the desired structure
 cardTextDiv.appendChild(priceParagraph);
 cardTextDiv.appendChild(descriptionParagraph);
 cardTextDiv.appendChild(ratingParagraph);
 cardTextDiv.appendChild(ratingButton);
 
 cardContentDiv.appendChild(productNameHeading);
 cardContentDiv.appendChild(productIdHeading);
 cardContentDiv.appendChild(cardTextDiv);
 
 cardDiv.appendChild(cardImageDiv);
 cardDiv.appendChild(cardContentDiv);
 
 liElement.appendChild(cardDiv);
 
 ulElement.appendChild(liElement);
 
 mainDiv.appendChild(ulElement);
 
 productsDiv.appendChild(mainDiv);
 
 // Append the entire structure to the document body
 document.body.appendChild(productsDiv);
}
 
window.addEventListener('load', () => {
    fetch('/browseProduct', {
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      },
    })
      .then(response => response.json())
      .then(browseProductResult => {
         products = Object.values(browseProductResult);
         console.log(products[0][0].image.data)
          for(let i=0 ; i<products.length ; i++){
           for(let j=0 ; j<3; j++){
            console.log(products[i][j].image.data)
             createCardInHtml(products[i][j].image.data, products[i][j].productName, products[i][j].productID, products[i][j].productPrice, products[i][j].productDescription, products[i][j].productRate);
           }
         }
      })
  });

这是代码

Answer 1

图像标签不是 HTML 容器，因此没有像您下面尝试做的那样的“imageElement.innerHTML”之类的东西...

const imageElement = document.createElement('img');

imageElement.innerHTML = image;

imageElement.alt = 'the image here';

相反，您应该像这样为其分配一个有效的源 URL 或数据 URI...

imageElement.src = image;

注意：假设您的标识符“image”是有效的图像路径。