reactjs - Reactjs - 无法连接音频源中的变量
问题描述
我正在从日期和路径动态创建音频源。
这是我的工作代码:
var cdrdata2 = this.props.cdrdata.map((data,index)=>{
return(
<tr key = {index} style={{display:'table',width:'100%',backgroundColor:'white'}}>
<td width = "11.3%" >{`${data.startDate}`}</td> //12-09-2020
<td width = "9.4%">{`${data.cdr_recording_file_path}`} // monitor/auto-1589470814-367-7865290090.wav
<button onClick={this.playAudio}>
<span>Play</span>
</button>
<audio className="audio-element">
<source src="http://localhost/cdr/phone_cdr/`${data.startDate}`}/{`${data.cdr_recording_file_path}`}"></source>
</audio>
</td>
</tr>
)
预期输出:
http://localhost/cdr/phone_cdr/12-09-2020/monitor/auto-1589470814-367-7865290090.wav
实际输出:
http://localhost/cdr/phone_cdr/%60$%7Bdata.startDate%7D%60%7D/%7B%60$%7Bdata.cdr_recording_file_path%7D%60%7D 404 (Not Found)
有人可以纠正我吗?提前致谢。
解决方案
您错误地使用了模板文字。正确的形式是:
<source src={`http://localhost/cdr/phone_cdr/${data.startDate}/${data.cdr_recording_file_path}`}></source>
推荐阅读
- python - 将 3 个 bs4.element.ResultSet 组合成一个主 ResultSet
- wordpress - 无法访问 wp-admin 和一些用户元数据
- php - 无法加载类别 php 和 ajax
- spring-boot - 关闭 HikariPool 中的异常日志记录
- kubernetes - Kubeadm init 挂在 [init] 如果必须拉取控制平面映像,这可能需要一分钟或更长时间
- laravel - 从数据库中提取变量时如何评估 Blade 变量
- reactjs - 使用“誓言”身份验证在 reactjs 应用程序中集成 Jira REST API
- c# - 如何对 64 位 .NET 4.7 项目进行单元测试?
- javascript - 更改子悬停时的父背景
- javascript - 以编程方式在儿童上设置“样式”时,iOS 上的 CSS Scroll Snap 视觉故障