创建集合/单个类型时不显示图像预览

Question

将图像添加到我的收藏/单一类型后，Strapi显示的预览图像不会显示，请参阅此处。

我检查了img src，src地址是正确的，url正确地将我带到了存储图像的位置，请参阅此处。

有人知道为什么/如何让预览图像工作吗？？

我正在使用以下内容：

• strapi-v4.1.3
• strapi提供商上传azure存储-v2.0.0
• 节点-v16.8.0
• Azure存储和CDN

Answer 1

我通过在我的中添加以下内容来解决这个问题/config/medlewares.js文件：

module.exports = [
'strapi::errors',
'strapi::cors',
'strapi::poweredBy',
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
'media-src': ["'self'", 'data:', 'blob:', `${AZURE_CDN_URL}`],
upgradeInsecureRequests: null,
},
},
},
},
];

Answer 2

我在使用其他云提供商时也遇到过这个问题，例如Cloudinary。我发现这是一个安全中间件的问题，任何在其他提供商上面临这个问题的人都可以去https://github.com/strapi/strapi/tree/master/packages/providers

在每个供应商指南中，都有一个部分：

安全中间件配置

由于Strapi Security中间件中的默认设置，您需要修改contentSecurityPolicy设置才能在媒体库中正确查看缩略图预览。您应该将strapi:：security字符串替换为下面的对象，如中间件配置文档中所述。

Answer 3

我使用以下设置修复了该错误：

module.exports = ({ env }) => [
"strapi::errors",

{
name: "strapi::security",
config: {
contentSecurityPolicy: {
directives: {
'connect-src': ['self', 'http:', env("SUPABASE_URL")],
'img-src': ['self', 'data:', 'blob:', , env("SUPABASE_URL"), 'https://dl.airtable.com'],

},
},
},
},
"strapi::cors",
"strapi::poweredBy",
"strapi::logger",
"strapi::query",
"strapi::body",
"strapi::session",
"strapi::favicon",
"strapi::public",
];

进入middleware.js

重新启动缩略图预览后，开始正常工作。