React不加载本地映像
React不加载本地映像
提问于 2021-01-10 17: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-10 17: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-10 17:39:06
import Img1 from '../../blogPostImages/img1.jpg';
<img src={Img1}/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65656177
复制
相似问题
React本地映像加载缓慢
React Native -在映像中加载本地映像
react:未能从本地api路径加载映像
React不会使用道具加载本地映像
React.js项目本地映像突然停止加载
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
