Question

我遇到问题，需要在React中渲染图像的帮助。问题在于该图像存储在本地，并且使用Axios.get（）与其他一些数据从数据库中检索到该图像的URL。所有数据显示正常，但无法渲染该图像。

class Lesson extends Component {
        state = {
	lesson: null
        };

componentDidMount() {
        Axios.get("https://localhost:44372/api/Lesson/lesson/" +
            this.props.location.pathname.substring(
                this.props.location.pathname.lastIndexOf("/") + 1)
        ).then(response => {   
	console.log("API Response", response);
	const newLesson = response.data;
	this.setState({
	    lesson: newLesson,
            });
        });
}

    render() {
        return (<div>
    	<h2 style={{ textAlign: "center" }}>{this.state.lesson.title}</h2>
    	<p>{this.state.lesson.text}</p>
    	<p>{this.state.lesson.field1}</p>

    	<img src={this.state.lesson.img}         //<-----here
    	    alt="none"
    		style={{
    		verticalAlign: "middle",
    		display: "block",
    		margin: "auto",
    		marginLeft: "auto",
    		marginRight: "auto"
    	    }}
    	/>

    <div>);

这样就不会显示图像。

我遇到的错误是：不允许加载本地资源：file：/// D：/Project/FrontEnd/platform/src/images/python_img.PNG

获取img的唯一方法是手动插入，但这不是我想要的：

<img src={require("D:\\Project\\FrontEnd\\platform\\src\\images\\python_img.PNG")}

我以为问题出在componentDidMount（）上，因为我一开始就得到了一个未定义的值，但是后来我只是从父页面提供了相同的路径（只是要检查），问题是相同的。

我做错了...

是否可以提供变量作为图像源？

Answer 1

如果图像本身捆绑在您的react应用程序中，则它将无法正常工作。

require（）仅接受静态

您可以做的事

1。有条件地渲染

const images = {
   image1: require('./image1.jpg'),
   image2: require('./image2.jpg'),
};

然后在您的应用中

    <img src={this.state.lesson.img === 'something_unique' ? images.image1 : images.image2}         //<-----here
        alt="none"
        style={{
        verticalAlign: "middle",
        display: "block",
        margin: "auto",
        marginLeft: "auto",
        marginRight: "auto"
        }}
    />

2。或者，如果您使用捆绑器，则可以获取公共URL并将其附加。

<img src={process.env.PUBLIC_URL + this.state.lesson.img} />

如何通过Axios.get（）中的URL渲染图像

1 个答案: