<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”