在实际的开发中我们经常会用到一些静态文件，尤其是图片和一些图标。有些时候为了加载速度可能也需要直接打包在 js 中。
我们可以直接在 tsx 或者 jsx 中直接引用资源文件，大部分的资源文件引入之后都会转化为一个路径。我们可以将其设置为了图片的 src，

  1. <template>
  2.     <div>
  3.         <img :src="src" alt="">
  4.     </div>
  5. </template>
  6. <script>
  8. export default {
  9.     name: "demo",
  10.     components: {},
  11.     data() {
  12.         return {
  13.           src:'./logo.png'
  14.         };
  15.     },
  16. };
  17. </script>

为了加快加载速度，并且减少网络请求，我们会把小于 1000k 的转化为 base64，这一版只对图片有效。

你可能注意到最后生成的 logo.png 会变成 logo.84287d09.png ，这个是为了保证每次发布版本都会更新图片，如果不改名字的话，会命中 logo.png 的缓存，你可以放心的使用 import 而不用担心缓存。

如果想要使用缓存，可以把文件放到 public/logo.png，然后再代码中这样使用。

<template>
    <div>
        <img src="/logo.png" alt="">
    </div>
</template>

在编译的时候，public 会全部移动到 dist 中，不会进行任何处理。使用时一定要使用绝对路径。通常我们建议从 JavaScript 导入 stylesheets，图片和字体。 public 文件夹可用作许多不常见情况的变通方法.

添加 SVG

svg 是一种特殊标签，为了方便管理，我们建议大家将其转化为一个组件来使用。网络上有很多将 svg 转化为的 react 组件的工具。最后结果是这样的：

return (
  <svg width={300} height={300}>
    <rect
      width="100%"
      height="100%"
      style={{ fill: 'purple', strokeWidth: 1, stroke: 'rgb(0,0,0)' }}
    />
  </svg>
);