在CodeSandbox的React应用渲染图片时出现TypeError 'message' is read-only错误

你的代码报错核心原因是JSX语法不规范：所有<img>标签都没有正确自闭合。在React的JSX语法规则里，像<img>这类没有子元素的空标签，必须写成自闭合形式/>，否则会触发语法解析异常，最终导致你看到的"message is read-only"错误。

修正后的完整代码如下：

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"
        alt="食物图片1"
      />
      <img
        className="srcimgimg"
        src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
        alt="食物图片2"
      />
      <img
        className="srcimgimg"
        src="https://images.pexels.com/photos/326279/pexels-photo-326279.jpeg"
        alt="食物图片3"
      />
    </div>
  </div>,
  document.getElementById("root")
);

额外补充两点：

• 建议给每个<img>添加alt属性，这是网页可访问性的基本要求，也能在图片加载失败时显示替代文本。
• 你原代码里第三个图片链接来自shutterstock，这类链接通常是预览图，无法直接在外部加载，我换成了一张可直接访问的图片链接，你可以根据需求替换成自己需要的图片URL。

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