如何在React.js中无需额外依赖仅用JSX展示图片与音频文件

一、仅用JSX实现音频、图片展示的方法 #

你完全不需要引入额外第三方库、复杂props传递逻辑，JSX本身支持直接书写原生HTML对应的标签，写法和你之前用的原生HTML几乎一致，仅需注意标签属性拼写符合JSX规范即可：

• 音频展示示例代码：

// 写法1：属性直接挂载在audio标签上
<audio controls src="你的音频资源路径" type="audio/mpeg" />

// 写法2：嵌套source标签，和原生HTML用法完全一致
<audio controls>
  <source src="你的音频资源路径" type="audio/mpeg" />
</audio>

• 图片展示示例代码：

// 注意：原生HTML的img标签路径属性为src，你之前写的scr属于拼写错误，这也是常见的图片加载失败原因
<img src="你的图片资源路径" alt="资源描述文本" />

你可以直接把上述代码写在React组件的return块中，不需要任何额外配置即可生效，最简完整组件示例如下：

function RouterMediaPage() {
  return (
    <div>
      <h2>路由器共享资源</h2>
      <img src="/photos/旅行记录.jpg" alt="旅行照片" />
      <audio controls src="/audio/晴天.mp3" type="audio/mpeg" />
    </div>
  )
}

二、localhost:3000访问时资源损坏的解决方法 #

按优先级排查以下几个常见原因：

1. 静态资源存放位置错误
   如果是基于Create React App搭建的项目，只有存放在public文件夹下的静态资源才能被开发服务器识别。比如你要访问photos/1.jpg，就需要在项目根目录的public文件夹下新建photos文件夹，把对应资源放进去，路径直接写/photos/1.jpg即可正常加载。如果资源放在src目录或其他磁盘位置，开发服务器默认没有权限读取，会返回404导致资源损坏。
2. 路径拼写错误
   重新核对资源路径的大小写、层级是否和实际存放位置完全匹配，React开发服务器对路径大小写是敏感的，同时确认img标签的路径属性是否为src而非拼写错误的scr。
3. 跨域限制
   如果你的资源直接走路由器U盘的共享路径（比如http://192.168.3.1/usb/xxx.mp3），localhost:3000和路由器的IP属于不同源，浏览器跨域限制会导致资源加载失败。你可以把需要展示的资源拷贝到项目public文件夹下访问，或者在React项目的开发服务器配置中添加代理规则，将资源请求代理到路由器的共享地址。
4. 资源本身或权限问题
   排除上述问题后仍加载失败，可直接在浏览器地址栏输入资源的完整路径，确认资源本身是否可以正常访问，排除文件损坏、路由器共享权限未开启的问题。

内容的提问来源于stack exchange，提问作者Roberto Aguiar