Cloudinary React 未向 img 标签添加宽度和高度属性

Question

如果我使用类似的东西：

import React from 'react'
import {Image} from 'cloudinary-react';

export const Logo = () => {
  return (
    <Image
        publicId="logo.png"
        crop="limit"
        width={170}
        height={16}
    />
  );
}

export default Logo;

结果我们得到

<img src="http://res.cloudinary.com/blablabla/image/upload/c_limit,h_16,w_170/v1/logo.png">

img 标签中没有 width 和 height 属性。

这就是 Google PageSpeed Insights 抱怨页面上有许多 img 标签的原因：

有办法解决这个问题吗？

Answer 1

你能尝试像这样内联传递它吗：

  <Image
        publicId="logo.png"
        crop="limit"
        style={{ width: "170px"; height:"16px" }}
    />

或者您只需将其用引号括起来：

  <Image
    publicId="logo.png"
    crop="limit"
    width="170"
    height="16"
/>

所以 width="170" height="16" 而不是 width={170} height={16}

Cloudinary React 未向 img 标签添加宽度和高度属性

Cloudinary React not adding width and height attributes to img tag

reactjs

cloudinary