Question

我有一些javascript示例代码应显示图像，但显示图像图标。我试图弄清楚为什么图像不显示Here is an image of what my screen looks like

class Colors extends Component {
  render() {
    return (
         <img src = "track.jpg" />    	  
    )
  }
}

export default Colors;

enter image description here

Answer 1

render ( <JSX> )只是将HTML呈现到DOM。除此之外，它实际上并没有太大不同。它使用了诸如className而不是class之类的东西来避免其他一些问题，但是除此之外，它非常相似。因此，要渲染图像，它应该像<img src="LinkToImage.png" />

如果它不显示图像，请再次检查它是否是正确的链接。也许尝试在浏览器中打开它。也许尝试直接在about：blank页面中直接输入HTML元素。在那行吗？

Answer 2

这应该有效：

import track from './pathToImage';
class Colors extends Component {
  render() {
    return (
       <div>
         <img src={track} />        
      </div>  
    )
  }
}

export default Colors;

在javascript类中显示图像

2 个答案: