React JS中存入数组的引入图片无法正常解析问题求助

问题原因 #

• 你没有使用<img>标签包裹图片资源，直接将导入的图片变量放在JSX中渲染，React无法将其识别为图片资源，只会当作普通值输出，因此无法正常渲染图片。
• 如果你存储content数组的文件没有正确导出，或是组件名使用了小写命名，也会导致出现异常报错。

解决方法 #

1. 首先确认存储content数组的文件末尾添加默认导出语句：

import universe from "./images/universespider.jpeg"

let content = [
    {
        title: "Universe",
        image: universe,
        author: "Alex",
        date: "09/09/8099",
        blog: "Spider-Man is in different universes.",
    },
]
// 新增导出语句
export default content

2. 修改博客组件的渲染逻辑，React组件名必须使用大驼峰命名，同时用<img>标签加载图片：

import "./blogs.css"
import content from "../../content"

// 组件名从小写blogs改为大驼峰Blogs，符合React规范
export default function Blogs() {
    return (
        content.map((blog, i) => (
            <div key={i}> 
                <div className="blogBox">
                    {blog.title}
                    {/* 用img标签加载图片，alt属性为必填项 */}
                    <img src={blog.image} alt={blog.title} />
                    {blog.author}
                    {blog.date}
                    {blog.blog}
                </div>
            </div>
        ))
    )
}

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