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

【问题标题】：Cloudinary React not adding width and height attributes to img tagCloudinary React 未向 img 标签添加宽度和高度属性
【发布时间】：2021-07-11 14:42:05
【问题描述】：

如果我使用类似的东西：

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 标签：

有没有办法解决这个问题？

【问题讨论】：

请看看我的回答，也许它会帮助你:)
您在中传递的参数指的是添加到输出 URL (c_limit,h_16,w_170) 但与 HTML 无关的 Cloudinary 转换标签宽度/高度。如果你想设置属性，那么@Sowam 的第一个代码示例就可以了。

标签： reactjs cloudinary

【解决方案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}

【讨论】：

我同时尝试了它们 1. 将 width 和 height 参数作为字符串传递 2. 添加了样式。属性没有出现，但是img元素中出现了style属性。据我了解，这并不是本文所需要的。 web.dev/optimize-cls/… 但是 PageSpeed Insights 似乎不再抱怨徽标元素了。我也会尝试其他图像元素。谢谢。