如何将img标签的来源指定为组件的状态？
如何将img标签的来源指定为组件的状态？
提问于 2019-10-28 12:51:33
我有一个react项目，其中有一个当前正在显示图片的组件。还有一个按钮：
import React from 'react';
class Pokemon extends React.Component {
state = {
text: "./blank.png"
};
handleButton = (e) => {
console.log("e: ",e);
this.setState( {
text: "./pikachupic.png"
});
};
render() {
return (
<div class="container-fluid" >
<div class="row">
<div class="col" style={{ background: "gray", color: "white" }}>
<button onClick={this.handleButton}>Show Pokemon</button>
</div>
<div class="col" style={{ background: "black", color: "white" }}>
<h3>Pokemon Description</h3>
<img src={require("./pikachupic.png")}/>
</div>
</div>
</div>
);
}
}
export default Pokemon;然而，我想要做的是从一个空白图像开始，用户一单击按钮，pokemon图像就会显示出来。所以我有一个以"./blank.png“开头的状态，一旦点击按钮，它就会变成"./pikachupic.png”。我尝试更改下面这行代码
<img src={require("./pikachupic.png")}/>要这样做：
<img src={require(this.state.text)}/>但在我做了更改之后，它抛出了错误。
错误:找不到模块'./blank.png‘
将this.state.text的值赋给img标记的源的正确语法是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-28 13:20:30
试着这样做：
<img src={require( `${ this.state.text }` )} />或者这样：
<img src={require( "" + this.state.text )} />因为require需要一个字符串，所以不能传入原始值
Stack Overflow用户
发布于 2019-10-28 13:14:58
所有你需要做的就是使用状态值作为你的img src值，我重命名了状态变量对不起，但是我的OCD不允许它只是'text‘:D
import React from 'react';
class Pokemon extends React.Component {
state = {
imgSrc: "./blank.png"
};
handleButton = (e) => {
console.log("e: ",e);
this.setState( {
imgSrc: "./pikachupic.png"
});
};
render() {
return (
<div class="container-fluid" >
<div class="row">
<div class="col" style={{ background: "gray", color: "white" }}>
<button onClick={this.handleButton}>Show Pokemon</button>
</div>
<div class="col" style={{ background: "black", color: "white" }}>
<h3>Pokemon Description</h3>
<img src={this.state.imgSrc}/>
</div>
</div>
</div>
);
}
}
export default Pokemon;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58585923
复制相关文章
相似问题
腾讯云开发者
