为什么我在使用codesandbox时从React应用程序代码渲染图像后收到错误**'TypeError“message”是只读的'**

Question

我正在使用codesandbox（在线代码编辑器/沙箱）构建一个react应用程序，该应用程序将渲染3个在线源图像。但让它工作并显示这些图像很困难。

它应用了一个样式表，其中包含用于测试和练习的最小样式。

我在浏览器预览页面上不断收到错误

TypeError "message" is read-only

。

我已经通过stackoverflow、google和网上进行搜索，但仍然无法解决问题。

下面是错误的内容index.js代码文件

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>My Favourte Foods</h1>
    <div>
      <img
        className="srcimgimg"
        src="https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg"
      >
      <img
        className="srcimgimg"
        src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
      >
      <img
        className="srcimgimg"
        src="https://www.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg"
      >
    </div>
  </div>,
  document.getElementById("root")
);

Answer 1

经过多次不成功的搜索，我终于找到了问题并解决了问题。因此，我觉得我应该分享经验。

问题是图像（img）标签作为自关闭标签没有正确关闭，也许在使用 React 时应该始终正确关闭。因此，给出了该错误消息。

例如，

<img src...>

是错误的，没有正确关闭。相反，你应该使用;

<img src..../>

这是正确且正确关闭的。换句话说，结束正斜杠应该伴随一个自结束标签，如 img 标签。

下面是正确/更正后的代码文件（图像标签已正确关闭，结尾标签处带有正斜杠）

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div>
    <h1>My Favourte Foods</h1>
    <div>
      <img
        className="srcimgimg"
        src="https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg" />
      <img
        className="srcimgimg"
        src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" />
      <img
        className="srcimgimg"
        src="https://www.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" />
    </div>
  </div>, document.getElementById("root")
);

Answer 2

确保没有语法错误。我遇到了同样的问题，但我正在对模板文字和操作字符串进行简单的挑战。我在复制并粘贴到的语句中多了一个分号 (;)。

例如。 console.log(attraction.toLowerCase(););

当我删除分号后，代码就按预期运行了。