veImageX是字节跳动子公司火山引擎推出的图片、文档等一站式解决方案。 WPJAM Basic的“CDN加速”功能也首次集成了veImageX。
通过此功能，您可以轻松地让WordPress CDN加速静态资源。为了您的方便，我整理了一份非常长且完整的指南，基本上涵盖了WordPress使用火山引擎veImageX加速静态资源CDN的各个方面。欢迎收藏，方便遇到问题时查询。
veImageX 的镜像回源功能原理
首先我们来说一下其背后的原理。 WPJAM Basic的CDN加速功能是利用veImageX的镜像回源功能实现的。因此，为了方便理解和操作，建议在使用之前先了解镜像回源的原理。
各类素材上传、托管、智能处理和 CDN 分发。
WordPress博客上的图片、CSS、JS等静态文件一般不会被频繁修改。使用镜像回源功能将这些静态文件资源镜像到veImageX服务器上。网站用户访问时，将直接从veImageX服务器访问。读取数据，使其可以是当网站的用户请求的资源不存在的时候，可以通过回源规则从设定的源地址获取到正确的数据，然后再返回给网站的用户和降低网站服务器读取数据的压力。
并且利用镜像回源功能实现静态资源CDN加速，不影响原有WordPress体验。如何上传图片仍然可以在WordPress中完成。
为什么不直接上传到 veImageX？
从前面的介绍可以看出，用户仍然需要先将图片上传到WordPress媒体库，然后通过镜像回源功能同步到veImageX。为什么不直接上传到veImageX？这样就无需浏览WordPress 媒体库。
如果要实现直接上传，需要连接veImageX的API。这需要额外的时间来开发，并且各个云存储提供的API略有不同。每增加一个云存储服务都需要进行额外的二次开发，每一个云存储服务都需要进行额外的二次开发。提高网站的速度用于云存储，镜像回源功能基本一致。
使用镜像回源功能的另一个好处是，已发表的历史文章中的图片也可以镜像到veImageX。我们需要做的就是根据以下准则进行设置。无需做任何其他事情，然后用户可以访问之后，网站上的所有图像都会自动镜像到veImageX 上。
一步一步教你使用 veImageX
了解了WPJAM Basic与veImageX对接的原理之后，我们就开始一步步激活并使用veImageX。总共有7个步骤，不过不用担心，只要耐心按照步骤操作，就可以完美完成。
首先，API 对接还会存在一定失败率，记得点击我的链接，火山引擎会给我佣金，因为我做的插件和写教程的辛苦，所以一定要点击这个链接。
激活时填写我的邀请码：注册开通火山引擎veImageX产品，即可领取福利：CLEMNL。
2、然后打开Volcano Engine的veImageX服务，点击右侧“服务管理”按钮，新建一个存储空间：[](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public /upload_8bd3cb614f6b949f598930763fdeb8bb=600x)
服务名称：根据自己的填写。区域：根据网站用户最多的地区进行选择。服务类型：选择每月免费额度（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费。绑定域名：请输入您要绑定的CDN域名。服务属性：选择永久保存。然后单击“保存”，火山引擎将审核您的服务。审核通过后，火山引擎会给您一个与域名绑定的CNAME值，将其填写到您域名管理中对应CDN子域的CNAME中。
3. 创建服务后，我们需要设置回源的镜像。点击上图中的“基本配置”按钮：
首先，您可以为CDN域名设置https证书：
这部分比较简单，就不介绍了。然后打开源地址访问：
然后向下滚动页面，可以设置图像处理服务：
我们只需要在主回源地址中填写WordPress博客的域名即可。备份回源地址可能会用于后续迁移，暂不填写。
4. 接下来，设置veImageX的图像处理模板，用于图像的智能缩放和裁剪。在上面第二步生成的服务中，点击“镜像配置”按钮，进入镜像回源页面，点击“新建模板”:
首先，进行常规编辑，根据自己的喜好设置模板名称，并选择原始格式作为输出源格式。
编辑操作要求更加严格。需要选择图片处理配置、首先设置缩放、然后再设置裁剪和缩放的宽高，这样可以适应WordPress中各种尺寸的图片缩放和裁剪的需要。
设置完之后会得到一个模板配置参数，比如我设置的：
tplv-g7ckde5uoo-image:resize_width:resize_height:crop_width:crop_height.image
这里必须存在resize_width:resize_height:crop_width:crop_height 部分，并且顺序必须与此一致。
设置好veImageX背景后，我们回到WordPress博客背景。安装WPJAM Basic插件后，点击WordPress后台菜单“裁剪的尺寸”“URL输入”：云存储：选择WPJAM。
CDN域名：输入veImageX中设置的域名。
图像处理：建议勾选它，以便我们可以使用veImageX来缩放和裁剪图像。
6.然后我们首先切换到“图像设置”选项卡，进行缩略图和其他图像的设置。
首先是缩略图功能，因为veImagex已经提供了更强大的缩略图功能。这里我们首先提供一个选项，可以直接使用veImagex的缩略图功能，这样就不需要在本地生成各种尺寸的缩略图了。
然后还可以设置文章中图片的大小。比如上图中设置为600，那么文章中图片的最大图片宽度为1200（高清图片显示的2倍）。超出的图片将缩放至1200宽度，让你不怕大图片。它需要花费CDN 流量。建议根据前端网页的宽度来设置。
接下来是WebP格式，支持将任意格式的图片自动转换为WebP格式。经过我的测试，使用WebP图片格式可以节省一半的流量费，所以不用怀疑，开启即可。
最后在veImageX后台输入刚刚生成的“CDN 加速”。 WordPress 根据此配置执行智能缩放和裁剪。
7、最后本地WordPress博客还需要设置本地域名和文件扩展名：
首先输入的是本地域名，即WordPress博客的域名。特别注意火山引擎veImageX。
veImageX最终是否生效就在这里。程序会将页面中的静态资源地址替换为CDN上的静态文件地址。当用户访问网站并看到静态文件时，它将是CDN上的地址。如果CDN上没有该文件，veImageX会通过我们在镜像源中设置的地址抓取并保存到veImageX中，然后进行CDN加速。
那么，如果站点中某些静态资源的链接是非HTTP方式的，例如//域名/图片地址.jpg，并且需要将这些静态资源镜像到veImageX上，那么就需要开启“无HTTP 替换”选项。
然后输入需要CDN加速的静态文件的扩展名。默认支持png/jpg/jpeg/gif/ico 这五种常用的图像扩展名。如果你想支持JS和CSS，还想支持CDN加速，还可以添加js/css加入。
继续进入需要CDN加速的静态文件所在目录。这里的设置和上面的设置会形成一个正则表达式，然后使用这个正则表达式将本地静态文件地址替换为CDN上的静态文件地址。
附加的域名基本不用。如果您是从其他云存储迁移的，您可能需要它。我们稍后再谈。
如何迁移到 veImageX
由于火山引擎veImageX推出较晚，大多数WordPress博客已经使用了其他云存储服务。许多人可能基于稳定压倒一切的想法和对问题的恐惧而不想迁移。
其实迁移根本不会有什么大问题，而且在目前的火山引擎促销期间，如果你使用我的邀请码模板配置参数，你就可以获得福利：本地域名也填入 veImageX 的镜像源。对于很多博客来说，基本上是免费的。
迁移前，本地图片可能已被删除。为什么？
因为本地图片全部镜像到云存储后CLEMNL，此时用户从云存储访问图片，本地图片将不再被访问。因此，一些服务器空间比较小的用户会删除自己的服务器。图像以节省空间。
这种删除本地镜像的操作在迁移过程中会造成两种情况。您可以根据自己的情况选择操作：
第一种，每月免费额度（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费：这种情况下，迁移非常简单，本地的图片是可以删除的。
在这种情况下，请遵循上面的veImageX 激活和使用指南，不会出现任何其他问题。在新服务中设置返程站点，最后是图片在自己的服务器还有保留。之后，等待用户访问你的网站，新的对象存储服务就会去你的服务器抓取图像，然后显示给用户。
第二种，CDN 域名都不需要换，这个时候就有点复杂了，把 CDN域名按照新的服务要求修改解析。为了更好地理解，假设我们从七牛云存储迁移到veImageX：
博客源域名为：https://blog.wpjam.com。
七牛设置的CDN域名为：https://cdn.wpjam.com
veImageX中新的CDN域名为：https://cdnnew.wpjam.com，
首先，遵循上面的veImageX激活和使用指南，但有两点不同：
1、veImageX设置镜像回源的地方，除了自己服务器的域名外，设置自己服务器上全部或者部分删除图片了为需要使用一个新的 CDN 域名。这是通过使用veImageX 镜像回源功能按顺序匹配的能力来实现的。如果本地图像被删除，它将返回到原来的位置。 CDN 进行抓取。
2、然后还需要把在七牛解析出新的CDN域名：https://cdnnew.wpjam.com。七牛设置的CDN域名https://cdn.wpjam.com解析不变。
3、最后返回WPJAM Basic的“CDN加速”功能设置界面，将七牛云存储中的原CDN域名（https://cdn.wpjam.com）填入“本地设置”选项卡下的“的 CDN 域名也要添加到备用源站地址”。在“云存储设置”选项卡下的“CDN域名”中填写新的CDN域名（https://cdnnew.wpjam.com）。
使用 veImageX 常见问题
虽然上面的veImageX使用指南非常详细，但是很多朋友在使用的时候还是经常会遇到一些问题。我来整理一下常见问题：
1. 设置好之后，怎么判断成功了？
其实很容易判断。简单来说，打开自己的网站，按按照 veImageX 的要求，查看网页源代码，看看图片的地址是否被替换成了CDN域名。如果图片已替换为CDN域名，则额外域名指令生效。
为什么要加F12？有可能部分用户的CDN域名没有按照要求解析到CDN，所以需要最后一步确认。
直接打开其中一张图片查看其响应头，可以看到响应头中有一个X-Powered-By: ImageX的响应头：
2.为什么 veImageX 的空间里没有看到任何的文件？
veImageX通过镜像回源的方式将博客中的图片抓取到veImageX空间中，但是veImageX空间中文件列表的显示有延迟，所以有时可能看不到最新的文件。如果我只是使用“CDN加速”功能。由于缓存，基本veImageX 空间中的文件列表可能会延迟显示。这不会影响图片等静态资源的加速和使用，所以不用太担心。检查CDN是否正确。如果加速成功，仍然使用之前的方法：检查文件的响应头是否有veImageX的特殊头。
在这里我想特别分享一个案例。有用户使用CDN加速后，发现图片不显示，需要一段时间才显示，基本。
这是因为他的服务器带宽比较小。设置好CDN加速后，veImageX的镜像回源爬虫来到他的服务器上，爬取所有静态资源。短时间内爬取了很多文件，并发量高，水管滞后小。卡住了，所以我刚设置的时候，没有显示，连样式都乱了。等一下，当图片和静态资源都取完后，小水管终于接通了，不需要再处理静态资源了。也可以使用小型水管服务器。网站速度很快。
3.我感觉什么都设置好了，但是图片还是不显示？
首先你想感受一下吗？你想让我感受一下吗？
因为很多时候感觉事情不对劲。遇到此类问题，第一步就是面对文档，仔细操作一遍。根据我的经验：99%的原因都是因为veImageX的空间里没有任何文件。。请特别检查这一点。
如果您确保遵循文档并设置镜像回源，那么请查看以下与插件无关但为还造成网站更慢的问题：
网站是https，但是CDN还是http。兄弟，在 veImageX 没有设置镜像回源的站点。这是浏览器的安全要求，所以可能影响图片显示。你的服务器是在 https 页面下，http 的资源是不加载的吗？进入您的服务器防火墙设置并检查，特别是对于使用宝塔的用户，是否设置了宝塔防火墙设置。有用户反映：有的对象存储去对象存储设置一下 ssl 证书，那么你网站的静态资源是否支持http访问，如果是，则将返回源地址改为http域名。如果没有，那么您只能更新您的SSL 证书。
4. 为什么 ****Revolution slider 的幻灯片不走 CDN，还是本地域名？****
此问题可归类为阻止了 veImageX 通过镜像回源功能来你站点的抓取资源的爬虫。以不支持带 SNI 的 https 方式回源插件为例，因为这个插件的用户比较多，接触的人也比较多。
因为前面提到了为什么部分图片没有被替换成 CDN 域名，还是本地域名，有些插件或者主题这样做的方式是，输出的图片没有http:或者https:而是直接以//开头，这样浏览器就会自动匹配当前的http协议网页到图像链接。这是一个更方便的解决方案，Revolution slider。
其实WordPress正确的做法是使用set_url_scheme函数。它会根据页面的http协议自动为图片添加相应的协议。不过这需要修改插件和主题的源码，不太适合很多人。
所以我在“CDN加速”功能中添加了“在 https 页面下，http 的资源是不加载的”选项。只要你检查一下，这些图片就会被替换成CDN域名，所以检查一下，然后刷新页面看看是否正确。是否更换为CDN域名：
出于效率原因，默认情况下不启用此选项，防止在 https 页面下，出现图片的链接是 http 而不加载。
另外，有用户通过浏览器开发者工具看到个别JS没有被部分替换为CDN域名。简单看了一下，这些JS并不是PHP直接加载的，而是通过其他JS加载的，所以无法替换，只能通过更改你的主题代码来实现。
5. 为什么使用 veImageX 之后，整个页面乱了？
根据前面介绍的镜像回源原理：将无http://或https://的静态资源也进行镜像处理。更具体地说，当该站点的用户第一次访问某个资源时，veImageX会请求源站点抓取该资源。之后，该站点的用户再次访问同一资源时，veImageX上已经有对应的资源，因此直接返回，无需请求原站进行爬取。
因此，如果veImageX上已有网站CSS文件，则本地修改样式不会生效。例如，如果网站主题更新了，CSS文件也进行了较大的修改，那么主题和HTML结构都升级了，但CSS文件仍然是旧版本，这可能会导致整个页面乱七八糟。
6. 怎么解决网站样式不同步的问题？
其实这个问题是如果没有这个问题，也不建议开启。有以下三种方法。让我们一一列出：
首先，我们直接拨打veImageX 只有在资源不存在的情况下才向源站抓取内容。这样，样式文件仍然是服务器本地的。不管你怎么修改，它都会不时更新。页面绝对不会乱。然而，这也是很糟糕的。 CSS文件仍然运行在服务器本地，无法使用CDN的加速功能。
这种方法是最简单的。如果以下方法对您来说太困难，或者您的操作没有生效，建议返回此方法。解决问题才是最重要的。
具体控制在下图的本地设置中。不要为扩展填写CSS。如果JS文件也有同样的问题，也建议不要填写。
其次，到怎么更新 veImageX 上面的样式文件，这样当用户再次访问这个资源时，就会再次爬取到源站，保证修改也更新到CDN上。
但每次修改文件时，都必须在CDN 上将其删除。如果更新的文件很多的话就比较麻烦了。那么CDN就会有304缓存，所以即使在CDN上刷新，也得清除本地浏览器缓存才能看到。结果，这会非常麻烦。
第三，还有一种方法，不镜像 CSS 文件，将WPJAM插件和主题生成的JS和CSS内联代码或文件合并到一个文件中，两个文件名会自动带有时间戳，这样因为都是新文件，并且用户访问的都是最新的。唯一的缺陷是它只支持WPJAM 制作的插件和主题。
7.我本地删除了图片，veImageX 上会同时删除图片吗？
第一个简单答案：veImageX 上面删除 CSS 文件。
由于WPJAM Basic的“CDN加速”是利用veImageX的镜像回源功能实现的，因此镜像回源只有一项操作。只有当用户请求的资源在veImageX空间中不存在时，才会捕获设置的源站点。挑选。
如果您直接在源站点（WordPress 本地）上修改或删除文件，veImageX 将不会察觉，因此不会重新抓取它。如果您必须让veImageX 知道，您必须主动通知它。为此，您需要连接到API。但WPJAM Basic的“CDN加速”不允许填写veImageX API所需的AppID和key，因此不支持直接上传图片。对于veImageX，也不支持修改和删除。
如果您本地已经删除了图片，想同时删除veImageX上的图片，则需要在veImageX后台的内容管理中找到对应的文件，然后直接删除。
8. 为什么我小程序上图片不显示了？
这是因为很多用户为了节省成本和防止图片被盗链，对云存储上的图片设置了防盗链，只用于自己的博客域名。小程序通过API接口与前端交互。请求图片的Referer不是你的WordPress站点，自然不会显示。
所以有两种解决方案。最简单的一种是关闭反盗链。我们要如何防止其他网站盗链我们的图片，并将它们用于我们自己的小程序呢？那么我们应该做什么呢？
经过我的研究，微信小程序中显示的图片的Referer为空或者https://servicewechat.com，所以我们只需在veImageX的防盗链设置中开启“空Referer”并添加https://servicewechat.com即可。
Volcano Engine veImageX的防盗链设置有点深入。首先选择需要设置的服务，点击“基本配置”，然后在“域名信息”中选择需要设置的CDN域名，点击“配置”，最后编辑“防盗链”设置：
类型选择“referer白名单”，打开空的referer，规则：输入域名和servicewechat.com，注意使用veImageX；拆分多个域名。
9.为什么网站上的小图标显示成空方格？
首先说明一下，这些小图标并不是图片，而是图标字体，所以这是因为目前的WordPress主题使用的是字体图标，而字体导致了CORS资源的跨域问题。
WPJAM Basic对静态资源进行CDN加速后，如果CSS中使用了一些字体文件，这些字体文件也会镜像到veImageX上。当您打开浏览器的开发者中心时，控制台中可能会出现以下错误消息：请求的资源上不存在“Access-Control-Allow-Origin”标头。
这是由跨源资源共享(CORS) 机制引起的，该机制使用额外的HTTP 标头来告诉浏览器是否允许在一个源上运行的Web 应用程序访问位于不同源上的资源。当Web应用程序从与自己不同的源（域、协议和端口）发起HTTP请求时，它会在使用WPJAM「静态文件」插件处发起HTTP请求。
如果你知道问题所在，你就会知道如何解决它。最简单的就是不镜像CSS文件，这样字体文件就不会被镜像，也就不会出现跨域问题。如果你仍然希望静态文件通过CDN加速，那么只需将字体文件设置为允许跨域访问即可。
在veImageX中选择要设置的服务，点击“基本配置”，然后在“域名信息”中对要设置的CDN域名点击“配置”，最后编辑“HTTP头配置”设置并添加一条规则：
【深度解析：千字教程，全面掌握字节跳动火山引擎veImageX操作技巧】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
这个火山引擎veImageX不错啊，听起来可以生成很多有意思的图片
有15位网友表示赞同！
我一直在想找到一个好用的图床工具，看看能不能试试这个
有10位网友表示赞同！
千字长文手把手教你？感觉能学到挺多东西，就试试吧！
有5位网友表示赞同！
字节跳动的东西质量还是不错的，这款veImageX应该蛮酷的
有9位网友表示赞同！
以前一直用着其他的一些图片生成工具，现在也想试试新的产品。
有10位网友表示赞同！
这种长文教程感觉很适合我这种小白，不用担心看不懂
有10位网友表示赞同！
如果真的能简单上手的话，这个veImageX就太棒了！
有18位网友表示赞同！
想要学习一下AI相关的知识，这款工具应该是个不错的开始吧？
有14位网友表示赞同！
生成图片这块一直都是比较受欢迎的题材，期待看看这个产品是什么样的
有10位网友表示赞同！
之前听说过火山引擎，不过很少用他们的产品，现在有点想了解下
有15位网友表示赞同！
只要能方便快捷地创建图片就好了，其他的都还好
有9位网友表示赞同！
学习新技术一直是我喜欢做的，这次试试看这个veImageX！
有6位网友表示赞同！
如果真的能生成出我想要的图片风格，那就太棒了!
有16位网友表示赞同！
现在很多人都想学习AI相关的技能，这款工具应该会有不少人关注
有17位网友表示赞同！
希望这篇教程能够解释得详细一些，这样才能更好地理解
有15位网友表示赞同！
我觉得这个veImageX很可能会成为未来设计的热门软件
有6位网友表示赞同！
对于新手来说，一篇千字长文的教程确实能帮助我们更好地入门
有6位网友表示赞同！
这款工具真的可以像教程里那样操作吗？有点好奇！
有16位网友表示赞同！
字节跳动出品的产品质量应该有保障吧！期待体验一下!
有15位网友表示赞同！
生成高质量的图片一直是一个难题，希望这个veImageX能够解决这个问题
有18位网友表示赞同！