迅雷地址转换为普通地址原理

您好，迅雷地址转换为普通地址的原理是：迅雷地址是一种特殊的地址，它的特点是可以提供更快的下载速度，更高的下载效率。迅雷地址是由一个特殊的服务器提供的，它可以把一个普通的网络地址转换成一个迅雷地址，从而提供更快的下载速度和更高的下载效率。迅雷地址的转换过程是通过一个特殊的服务器来完成的，它可以把一个普通的网络地址转换成一个迅雷地址，从而提供更快的下载速度和更高的下载效率。迅雷地址的转换过程是通过一个特殊的服务器来完成的，它可以把一个普通的网络地址转换成一个迅雷地址，从而提供更快的下载速度和更高的下载效率。迅雷地址的转换过程还可以把一个迅雷地址转换成一个普通的网络地址，从而可以让用户更快地访问网络资源。

通过访问服务器来获取不同的服务的过程称为客户端/服务器模型。在客户端/服务器模型中，服务器提供特定的服务，客户端通过访问服务器来获取这些服务。客户端和服务器之间通过网络连接进行通信，客户端向服务器发送请求，服务器对请求进行处理并向客户端返回相应的数据或服务。
客户端/服务器模型是一种常见的分布式计算架构，可以让不同的计算机、设备或应用程序之间协同工作，共同完成特定的任务或提供服务。这种模型通常具有高度的可扩展性、灵活性和可靠性，被广泛应用于各种 Internet 应用中，例如 Web 服务器、电子邮件服务器、数据库服务器等。

web需要大量，来源大致分为这几个：

静态的应该是指类似 logo 之类的，用作页面修饰的。

动态的是指从服务器动态得到的（如博客每一篇都不一样，需要动态获取）。

写法大致分为这几个：

由于是新手，所以不从原理探究，而是了解用法。

仔细观察项目目录，分有 public 和 asserts 文件夹：

顾名思义，这两个文件夹应该管控资源。

首先从asserts开始。

我们首先打开 Appvue ,查看template:

里面定义了一个 Vue logo，其中引用了asserts文件夹的。根据路径，我们可以找到路径。那么如果我们有其他，自然也可以类比使用。

接下来我们看看在更高层目录（组件）中是否也可以通过这种方式使用：

上面我们在 components 文件夹中使用，通过 尝试使用asserts文件加下的logo，然后查看效果：

出现了两个 logo ，第一个是在 Appvue 中使用的，第二个是在我们的 hello world 组件中使用，符合预期。

那么类推，在任何位置的组件我们可以直接在 img 标签中使用 asserts 的标签。

这种方法应该是静态的，因为在 Vue 中，我们不该使用 js 获取。

除去 img 标签，另一个十分重要的引入方法为通过 background-image 属性引用，试试看是否有效：

我们定义了一个 div 标签，占用 200x200空间，并让 background-image 引用与 img 标签相同的路径：

结果显示 div确实存在，但是背景图没有显示出来，怎么回事？

按下 F12 打开 dev tools ， 让我们检查下路径：

可以看到 img 标签的 src 变为了 /img/logo82b9c7a5png , 而不是我们写入的 /assets/logopng ,而 div 的背景路径没有发生改变，导致无法显示正确的背景。

通过这种方式可以了解到： img 标签的路径会被正确转换，而 background-image 不会被转换。

举一反三，我们尝试在 data 中写入路径引用：

那么这个img路径自然也不会被处理，从而无法显示。

public 文件夹在项目根目录。

根据搜索到的资料， public 文件夹不会被 webpack 处理，你用什么路径引用他就是什么，那么原理上，我们可以在 img

, background-image , data 中正确的引用它。

可以看到，在这个文件夹下直接引用了 faviconico 并且成功加载了。

类比，在我们的 helloworld 组件中使用：

(为了效果明显，我把logo在public文件夹下拷贝了一份)。

结果， asserts 引用与 public 引用都得到了正确的显示。

再结合之前对 asserts 的探究，通过在文件末尾添加哈希值，避免了public的命名冲突。

因为是新手，所以只能从表观来理解，希望以后随着深入能从原理上理解。

asserts 文件夹下的资源会被 webpack 处理（添加哈希值等等），导致直接引用无法找到文件。

public 文件夹下的资源不会被处理，可以直接通过路径引用。

结合之前的需求(动态与静态资源)，我总结了下面想法：

---