如何解决<Image source={require(" ")} /> 显示不正确?
这有效,但它有点过于静态。上传文件时我需要动态更新个人资料图片。
import picture from "../../images/public/600bc441b2b2b62c542bd135profilepicture.jpg";
return(
<div>
<Image className={"profilepicture"} source={picture} alt={"pic"} />
</div>
)
所以我使用 Backend-Axios-Call 实现它,如下所示:
const [mapimages,setMapImages] = useState(null);
useEffect(() => {
axios.get(API_BASE_URL + '/user/images',payload)
.then(function (response) {
if (response.status >= 200 && response.status < 300) {
const files = response.data.files[0];
const requireimg = require("../../images/public/" + files);
setMapImages(<Image source={requireimg} alt={"TEXT"} />);
} else {
alert("error getting images");
}
})
.catch(function (error) {
console.log("DOWNLOAD: " + error);
});
},[]);
return(
<div>
{mapimages}
</div>
)
这是我的图像检查器中的路径:
<img alt="TEXT" class="profilepicture" source="/static/media/600bc441b2b2b62c542bd135profilepicture.8a22cb97.jpg">
和导航 来自
http://localhost:3000/#/profile
到
http://localhost:3000/static/media/600bc441b2b2b62c542bd135profilepicture.8a22cb97.jpg
还显示图像。
我一无所知,因为这以前有效。我只是忘了把它推送到 git :(
解决方法
您应该尝试在图像标签中用“src”替换“source”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。