文档
资源使用
原理上只要浏览器支持的资源我们都可以支持,比如常见的资源有图片资源、视频资源、音乐资源等。
图片资源使用
import React from 'react';
import './style.css';
// 图片资源地址
const pictrue =
'https://cdn.pixabay.com/photo/2022/02/19/21/46/beach-7023446__340.jpg';
export const App = () => {
return (
<div id="app">
<img src={pictrue} />
</div>
);
};
视频资源使用
import React from 'react';
import './style.css';
const movie =
'https://cdn-1302120008.cos.ap-nanjing.myqcloud.com/Seoul%20-%2021985.mp4';
export const App = () => {
return (
<div id="app">
<video src={movie} controls={true} />
</div>
);
};
音乐资源使用
import React from 'react';
import './style.css';
const music =
'https://cdn.pixabay.com/download/audio/2022/02/15/audio_1e79dbf2b9.mp3?filename=into-the-night-20928.mp3';
export const App = () => {
return (
<div id="app">
<audio src={music} controls />
</div>
);
};
推荐使用的 cdn 资源服务
资源地址 | 描述 |
---|---|
https://www.jsdelivr.com/ | 免费对 github 或者 npm 的资源进行 cdn 加速 |
https://pixabay.com/zh/ | 免费的图片、视频资源库。 |
- 或者你可以通过一些公有云的对象存储服务来上传并使用自己的资源。