拒绝加载图片答案

【问题标题】：Refused to load the image拒绝加载图片
【发布时间】：2021-06-06 02:31:08
【问题描述】：

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA8gBBAEG7NC6zAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4wwNFQsGe+TrNQAAADxpVFh0Q29tbWVudAAAAAAAUHJvY2Vzc2VkIEJ5IGVCYXkgd2l0aCBJbWFnZU1hZ2ljaywgejEuMS4wLiB8fEIyejRLlgAAA0RJREFUOMuNlE0odG8Yxn/nOc+c+TCimCkUGYUmjLJgUtgqKQt2srC1sLextbak9EqyHktfO1G+lZIkGVOiTseMMfPMjOe/0IzXy9/7/pbn1NV1X/d9Pcbw8LDmG7TW5PN5DMPANE0MwwDAMAyUUry9vSGlREqJ1h8S4k8BgLe3NwzDYHR0lLGxsdI3gEwmQyQSYWpqimAwiFLqkxFZUhYCv9+P4zgIIZBS0tTUhGmauN1uXl9fUUpRX1/P+Pg4Qggsy/rkruQwm...3L5aK6uhqtNVJKtra2iMViSCkpFApIKT8d+yeHNTU1s5eXl +zv77O3t4fP56OtrQ2lFLlcDpfLVTr4wcFBAHK5HI7joJTCMAyEEAjx3hFZrE+xUicnJ/T09ODxePB6vVxcXLC+vo5SCq01oVCI7u5uDMPg4eGB6+tr4vE4juO81/H36mmt8Xg8SCmxLIuLiwsWFxdLDg4PDzk+PkZKSUNDA5FIhJGRESorK3Ech7W1NcyWlpbZomgulyMYDDIwMMDt7S1LS0vFMUp1NE0TIQS2bXN0dMTZ2RmBQICmpqZ3M3+GWlNTw/PzMwsLCyilvt2q1hohBOXl5SSTSZaXlzk9PeX+/v5DsBhuV1cXKysrJJNJPB4Pf8PlcgFwcHDwPknxh1KKcDiMbducnp7+2IbvsCzrPeviCAB9fX1sbm7i8/m+vbF/QQAUCgVqa2u5uroikUh8+4 r8K7KYw8PDA3d3d3g8nh+7+jf+A6kWbVI0BmDOAAAAAAElFTkSuQmCC'，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作备用。

const express = require("express");

const multer = require("multer");

const Product = require("../models/product")

const router = express.Router();

const MIME_TYPE_MAP = {
  "image/png": "png",
  "image/jpeg": "jpg",
  "image/jpg": "jpg"
};

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const isValid = MIME_TYPE_MAP[file.mimetype];
    let error = new Error("Invalid mime type");
    if (isValid) {
      error = null;
    }
    cb(error, "backend/images");
  },
  filename: (req, file, cb) => {
    const name = file.originalname
      .toLowerCase()
      .split(" ")
      .join("-");
    const ext = MIME_TYPE_MAP[file.mimetype];
    cb(null, name + "-" + Date.now() + "." + ext);
  }
});


router.post("", multer({ storage: storage }).single("image"), (req, res, next) => {
  const url = req.protocol + "://" + req.get("host");
  const product = new Product({
        title: req.body.title,
        cost: req.body.cost,
        detail: req.body.detail,
        imagePath: url + "/images/" + req.file.filename
      });
      product.save().then(createdProduct => {
        res.status(201).json({
          message: "Product added successfully",
          product: {
            ...createdProduct,
            id: createdProduct._id
          }
        });
    });
  });

router.put("/:id", multer({ storage: storage }).single("image"), (req, res, next) => {

  let imagePath = req.body.imagePath;
  if (req.file) {
    const url = req.protocol + "://" + req.get("host");
    imagePath = url + "/images/" + req.file.filename
  }
    const product = new Product({
      _id: req.body.id,
      title: req.body.title,
      cost: req.body.cost,
      detail: req.body.detail,
      imagePath: imagePath,

    });
    console.log(product)
    Product.updateOne({ _id: req.params.id }, product).then(result => {
      res.status(200).json({ message: "Update successful!" });
    });
  });
  

router.get("", (req, res, next) => {
    Product.find().then(documents => {
        res.status(200).json({
          message: "Products fetched successfully!",
          products: documents
        });
      });
  });

  router.get("/:id", (req, res, next) => {
    Product.findById(req.params.id).then(product => {
      if (product) {
        res.status(200).json(product);
      } else {
        res.status(404).json({ message: "Product not found!" });
      }
    });
  });

  router.delete("/:id", (req, res, next) => {
    Product.deleteOne({ _id: req.params.id }).then(result => {
      console.log(result);
      res.status(200).json({ message: "Product deleted!" });
    });
  });

  module.exports = router;

其他文件---->

const path = require("path");
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");


const productsRoutes = require("./routes/products")

const app = express();

mongoose
  .connect(
    "mongodb+srv://Alish:omWPviAUG1sEADwa@cluster0.e27pd.mongodb.net/MedicareDB?retryWrites=true&w=majority"
  )
  .then(() => {
    console.log("Connected to database!");
  })
  .catch(() => {
    console.log("Connection failed!");
  });

  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use("/images", express.static(path.join("backend/images")));
  
app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept"
    );
    res.setHeader(
      "Access-Control-Allow-Methods",
      "GET, POST, PUT, PATCH, DELETE, OPTIONS"
    );
    next();
  });

  app.use("/api/products", productsRoutes);
  
  module.exports = app;

【问题讨论】：

标签： node.js angular mongodb express stack

【解决方案1】：

那么问题应该出在角度方面吧？如果是使用 DOM sanitizer 来通知您的绑定源是安全的。

将 dom sanitizer 导入组件

import { DomSanitizer } from '@angular/platform-browser';

将它注入你的构造函数

constructor(
    private sanitizer: DomSanitizer,
  ) { }

清理你的网址

this.base64Image = domSanitizer.bypassSecurityTrustUrl(this.imageURL);

【讨论】：