解决react使用＜img＞时图像不显示问题，内附代码和解释

在react项目开发时，遇到了使用标签时图像不显示的问题，具体表现如下图所示。

代码为：

function App() {
  return (
    <div>
      <img src='imgs/动态按钮.png'/>
    </div>
  )
}

为父元素div添加宽和高，或者为img元素添加宽和高都不能解决问题。

最终发现问题源自项目结构。

本项目是使用create-react-app创建的，其中存在public文件目录，index.html文件入口就在该目录中，因此当把图片等静态文件放到此目录中时，可以采用上面所写的代码直接读取到对应的文件。

在实际开发中，我们的代码被写入和public同级的src文件目录中，此时如果直接使用上面的代码方式，相对路径无法读取到对应的文件。因此，需要使用import引入文件的方法对文件进行读取。使用两种方法读到的文件路径如下图所示。

方法1: 图片放入public文件夹中

function App() {
  return (
    <div>
      <img src='动态按钮.png'/>
    </div>
  )
}

方法二： import方式引入/src/imgs中的图片

当前文件在src中，与imgs同级。src与public同级。

import buttonimage from './imgs/动态按钮.png'
function App() {
  return (
    <div>
      <img src={ buttonimage }/>
    </div>
  )
}