我使用codesandbox（在线代码编辑器/沙箱）构建了一个react应用程序，它可以渲染3个在线来源的图像，但是很难让它工作并显示这些图像。
它有一个应用于它的样式表，带有用于测试和实践的最小样式。
我在浏览器预览页面上一直看到错误**TypeError "message" is read-only**。
我已经通过stackoverflow，谷歌和在线搜索，但仍然无法解决这个问题。
下面是错误的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")
);
1条答案
按热度按时间bxfogqkk1#
经过多次不成功的搜索，我终于弄清楚了问题并修复了问题。因此，我觉得我应该分享经验。
问题是image（img）标签作为一个自关闭标签没有正确关闭，也许在使用react时应该总是正确关闭。因此，给出了错误消息。
例如，
<img src...>是错误的，没有正确关闭。<img src..../>这是正确的，也就是说，关闭的正斜杠应该伴随着一个自关闭标签，比如img标签。下面是正确/纠正的代码文件（图像标签正确关闭，并在结束标签处使用正斜杠）