React.js导入图片后仅展示资源路径而非渲染图片，如何处理？

当前渲染逻辑存在明显偏差：代码直接把存储在post.picture里的图片路径字符串当作普通文本节点插入到div中，React 不会自动将字符串路径识别为图片资源完成渲染，因此页面最终只会输出纯文本格式的资源路径。
你目前的图片导入写法本身是合规的：在 Create React App 这类内置了静态资源处理能力的 React 脚手架项目中，通过import importedImage from './assets/path.png'导入的变量，就是项目打包后可正常访问的图片资源路径，只是没有被正确绑定到图片标签的src属性上。

把原来直接渲染路径文本的代码，替换为标准的图片标签绑定写法：

{posts.length === 0 ? (
  <p>No posts...</p>
) : (
  posts.map((post) => (
    <div key={post.id}>
      {/* 替换原来直接写 {post.picture} 的逻辑 */}
      <img
        src={post.picture}
        alt={post.name}
      />
    </div>
  ))
)}

• 后续补充大量成员数据时，不需要在membersData文件顶部逐行写图片导入语句，可以直接借助构建工具的目录批量导入能力，一次性加载assets目录下的所有图片资源，减少重复编码量。
• 给img标签补充对应的alt属性，既可以在图片加载失败时给出明确的提示文本，也能满足页面可访问性的规范要求。

注：如果项目是从零搭建没有配置静态资源处理规则，需要在构建配置中添加对应png、jpg等图片格式的资源处理规则，否则直接写相对路径的src会出现资源加载404问题。

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