如何在NuxtJS中从Strapi渲染Cloudinary图片？解决CSP加载错误

DevOps 小满

2026-7-26

解决Nuxt中Cloudinary图片因CSP限制无法加载的问题

问题

从Strapi CMS获取内容数据后，在Nuxt应用中渲染Cloudinary图片时被浏览器拦截，报错如下：

Refused to load the image '(url goes here)' because it violates the following Content Security Policy directive: "img-src 'self' data:".

图片标签已配置正确的Cloudinary链接，但无法正常渲染：

<img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" src="https://res.cloudinary.com/diglwbyf0/image/upload/v1680679242/20220802_161149_732ed0aa85.jpg" alt="">

原因

浏览器的内容安全策略（CSP）中，img-src指令仅允许加载来自当前域名（'self'）和data:协议的图片，而Cloudinary的域名不在允许列表内，因此被拦截。

解决方案

需要在Nuxt配置中更新CSP规则，将Cloudinary的域名加入img-src的允许列表，分版本操作如下：

Nuxt 3

在nuxt.config.ts（或nuxt.config.js）中配置security模块的CSP规则：

export default defineNuxtConfig({
  security: {
    contentSecurityPolicy: {
      directives: {
        'img-src': ["'self'", 'data:', 'res.cloudinary.com']
      }
    }
  }
})

如果未安装nuxt-security模块，先执行安装命令：

npm install nuxt-security

Nuxt 2

在nuxt.config.js的head配置中添加CSP元标签：

export default {
  head: {
    meta: [
      {
        httpEquiv: 'Content-Security-Policy',
        content: "img-src 'self' data: res.cloudinary.com;"
      }
    ]
  }
}