如何为react-grid-gallery的Gallery组件生成的img标签添加crossorigin属性

解决react-grid-gallery中给添加crossorigin属性的问题 #

你之前用tags字段加crossorigin属性是找错了配置项——tags是用来给图片添加展示标签的，根本不是用来设置img元素DOM属性的。

正确做法是在每个图片配置对象里直接加crossOrigin属性（注意JSX里用驼峰命名，对应HTML的crossorigin），取值根据你的跨域需求选：

• 'anonymous'：跨域请求不携带Cookie等凭证
• 'use-credentials'：跨域请求携带凭证

修改后的images数组示例： #

const images = [
  {
    src: '/image.png',
    thumbnail: '/image.png',
    crossOrigin: 'anonymous' // 按需切换取值
  }
]

完整组件代码： #

import React from "react";
import Gallery from "react-grid-gallery";

const ImageGallery = ({ images = [], title }) => {
  if (images.length > 0)
    return (
      <>
        <div style={{ overflow: 'auto', height: '400px' }}>
          <span className="lead">{title}</span>
          <Gallery images={images} enableImageSelection={false} />
        </div>
      </>
    );
  else {
    return <></>;
  }
};

export default ImageGallery;

这样配置后，Gallery组件生成的<img>标签就会自动带上crossorigin属性，和你预期的输出一致。

内容的提问来源于stack exchange，提问作者Jester Adduru