React不加载本地映像
React不加载本地映像
提问于 2021-01-11 01:19:05
最近我一直在研究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和其他依赖项，但问题仍然存在。我的工程文件树如下：
感谢您的支持！
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-11 01:46:16
尝试将图像导入为
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 BlogPostStack Overflow用户
发布于 2021-01-11 01:39:06
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65656177
复制相关文章
相似问题
腾讯云开发者
