Question

最近我一直在研究 React。我的代码遇到了一些问题，但不知道原因。

我正在尝试使用以下代码在我的网页中加载本地图片：

import React from 'react'
import './style.css'
import Card from '../UI/Card'

const BlogPost = (props) => {
    return (
        <div className="blogPostContainer">
            <Card>
                <div className="blogHeader">
                    <span className="blogCategory">Featured</span>
                    <h1 className="postTitle">Beautiful is Beautiful</h1>
                    <span className="postedBy">Post on 31 of July, by Victor Arduin</span>
                </div>
                <div className="postImageContainer">
                    <img src={require('../../blogPostImages/img1.jpg')} alt="Post Image"/>
                </div>  
            </Card>
            
        </div>
    )
}

export default BlogPost

但是，当我访问网页时，没有图像。当我检查页面的元素时，我发现以下代码：

不知何故，图像似乎没有加载到页面中。我在论坛里查了很多问题，但似乎没有一个能解释这个问题。

我也尝试重新安装几个模块作为 webpack 和其他依赖项，但问题仍然存在。我的项目的文件树如下：

感谢您的支持！

Answer 1

尝试将图像导入为

import postImage from "../../blogPostImages/img1.jpg";

修改后的代码


import React from 'react'
import './style.css'
import Card from '../UI/Card'
import postImage from "../../blogPostImages/img1.jpg"

const BlogPost = (props) => {
    return (
        <div className="blogPostContainer">
            <Card>
                <div className="blogHeader">
                    <span className="blogCategory">Featured</span>
                    <h1 className="postTitle">Beautiful is Beautiful</h1>
                    <span className="postedBy">Post on 31 of July, by Victor Arduin</span>
                </div>
                <div className="postImageContainer">
                    <img src={postImage} alt="Post Image"/>
                </div>  
            </Card>
            
        </div>
    )
}

export default BlogPost

Answer 2

import Img1 from '../../blogPostImages/img1.jpg';

<img src={Img1}/>

反应不加载本地图像

2 个答案: