Vue中如何根据主题获取不同的资源切换图片？下面本篇文章就来给大家介绍一下Vue优雅的实现多图片换肤需求的方法，希望对大家有所帮助。
【相关推荐：《vue.js教程》】
最近公司的一个小游戏Y需要实现本土化主题，即不同地区需要展示不同的主题，而且游戏的图片众多，如何优雅快速得加载正确的皮肤图片就变得尤为重要。
css样式切换社区里已经有很多方案，可以自行参考，该文章已经讲得非常详细，这里不再赘述，本文主要讲讲如何根据主题获取不同的资源切换图片。
图片换肤，根据以往经验，得益于webpack的依赖管理，我们一般是使用require引入图片。比如这种写法(require(`@assets/img/${theme}/bg.png`))，webpack会将@assets/img中的所有文件都加入到bundle中，从而在运行的时候可以找到对应的图片。具体实现如下：
<template>
<!-- 这里需要判断图片是否存在，如果不存在需要指定为auto，不然会引起404，导致系统告警 -->
<div class="y-content" :style="{backgroundImage: contentBg ? `url(${contentBg})` : 'auto'}">
<img class="y-content__reward" :src="rewardImg" />
</div>
</template>
<script>
data: () => ({
theme: 'blcak'
}),
computed: {
contentBg() {
try {
// this.theme是文件夹，将不同的皮肤放到不同的文件夹，用同样的命名
return require(`@assets/img/${this.theme}/contentBg.png`)
} catch (err) {
return '';
}
},
rewardImg() {
try {
return require(`@assets/img/${this.theme}/rewardImg.png`)
} catch (err) {
return '';
}
}
}
</script>以上代码基本上能解决大部分的换肤需求，但是对于图片需要预先加载的项目，我们还需要区分不同主题的图片便于优化提前加载，由于编译后的图片链接跟编译前的链接是不同，因此我们获取编译后的图片链接。一般的项目中比如使用官方脚手架vue-cli构建的项目，所有的图片都会被url-loader处理后放到同一个文件夹image当中，这样编译前不同文件夹相同名字的图片编译后之后hash是不同，因此我们是无法区分不同主题的图片的。
于是，首先我们需要将不同的主题图片放置到不同的文件夹当中，同样适用用url-loader
// vue-cli配置
const imagesRule = config.module.rule('images');
imagesRule.uses.clear() //清除原本的images loader配置
imagesRule
.test(/white/.+.(jpg|gif|png|svg)$/)
.use('url-loader')
.loader('url-loader')
.options({ name:"img/white/[name].[hash:8].[ext]", limit: 8192 })
// 加多一个主题的配置
config.module
.rule('image2')
.test(/black/.+.(jpg|gif|png|svg)$/)
.use('url-loader')
.loader('url-loader')
.options({name:"img/black/[name].[hash:8].[ext]", limit: 8192 })
// 自定义webpack配置
rules: [
{
test: /white/.+.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/white/[name].[hash:8].[ext]',
}
}
],
},
{
test: /black/.+.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/black/[name].[hash:8].[ext]',
}
}
],
},
]这样子编译后不同主题的图片就会被放置到不同的文件夹当中，这样就结束了吗？还没有，我们还需要获取编译后的图片链接，才能在进入游戏页面的时候提前加载主题图片，这里我们可以写一个webpack plugin来帮我们收集相应的图片，生产各自主题的json文件。插件代码如下：
// webpack版本为4.x
class WebPackSouceManifest {
// 将 `apply` 定义为其原型方法，此方法以 compiler 作为参数
constructor(option = {}) {
// 黑色主题的文件名
this.blackManifestName = option.blackManifestName || 'js/blackManifest.json'
// 白色主题的文件名
this.whiteManifestName = option.whiteManifestName || 'js/whiteManifest.json'
this.blackJsonData = {
code: 0,
data: []
}
this.whiteJsonData = {
code: 0,
data: []
}
this.addFileToSouceManifest.bind(this)
}
apply(compiler) {
// 指定要附加到的事件钩子函数
compiler.hooks.emit.tapAsync(
'HashServiceWorkerStartPlugin',
(compilation, callback) => {
const allBuildFiles = Object.keys(compilation.assets)
allBuildFiles.forEach((file) => {
if (file.indexOf('white') !== -1) {
this.addFileToSouceManifest('white', file)
} else {
this.addFileToSouceManifest('black', file)
}
})
const sourceBlack = JSON.stringify(this.blackJsonData)
const sourceWhite = JSON.stringify(this.whiteJsonData)
compilation.assets[this.blackManifestName] = {
source: () => {
return sourceBlack;
},
size: () => {
return sourceBlack.length;
}
}
compilation.assets[this.whiteManifestName] = {
source: () => {
return sourceWhite;
},
size: () => {
return sourceWhite.length;
}
}
callback()
}
);
}
addFileToSouceManifest(type, file) {
let fileItem = {
src: file,
}
if (/.js$/.test(file)) {
fileItem.type = 'text'
} else if (/.js.map$/.test(file)) {
fileItem.type = 'json'
}
if (type === 'white') {
this.whiteJsonData.data.push(fileItem)
} else {
this.blackJsonData.data.push(fileItem)
}
}
}
module.exports = WebPackSouceManifest;因此我们得到不同主题的图片列表json，在进入页面的时候通过ajax获取到列表之后对别表中的图片进行加载，虽然以上的做法可以实现需求，但是实在太过复杂？那还有没有轻松的方式呢？当然是有的。
仔细分析上面的代码后她，我们最终要获得的是图片编译后的结果，所以如果我们能够生成一个图片对象，将图片的name当作key，图片编译后的结果当作value，那么上面的代码将可以简化为如下：
<template>
<!-- 这里需要判断图片是否存在，如果不存在需要指定为auto，不然会引起404，导致系统告警 -->
<div class="y-content" :style="{backgroundImage: contentBg ? `url(${contentBg})` : 'auto'}">
<img class="y-content__reward" :src="rewardImg" />
</div>
</template>
<script>
data: () => ({
theme: 'middleEast'
}),
computed: {
contentBg() {
// skinImage是跟组件下的字段
return this.$root.skinImage['contentBg'] // contentBg为name
},
rewardImg() {
return this.$root.skinImage['rewardImg']
}
}
</script>如此代码变得简洁，不需要通篇的require跟try catch，接下来我们来如何实现这个skinImage对象呢
答案就是使用webpack的require.context
通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块，具体用法这里不再赘述，
详细请查看官方文档 requirecontext
https://webpack.docschina.org/guides/dependency-management/#requirecontext
于是我们来写一个自动导入图片并生成skinImage对象的函数
const black = require.context('../black', true, /.(png|jpg|gif)$/);
const middleImageObj = {};
black.keys().forEach(path => {
// 获取图片的key
const key = path.slice(2, -4);
blackImageObj[key] = rawSkin(path);
});这样子我们就得到了黑色主题的图片对象，由于require.context的执行是在编译过程而不是运行时，所以所有的参数只能是静态的，这里我们还需要将白色主题的图片也提前获取，如下
const black = require.context('../black', true, /.(png|jpg|gif)$/);
const middleImageObj = {};
black.keys().forEach(path => {
// 获取图片的key
const key = path.slice(2, -4);
blackImageObj[key] = rawSkin(path);
});这样我们就得到了两个主题的图片对象，接下来只要将某一个对象赋值给根组件的skinImage，就大功告成了，是不是比起上面的要更简单，更简洁。
更多编程相关知识，请访问：编程入门！！
以上是Vue中如何根据主题获取不同的资源切换图片的详细内容。更多信息请关注PHP中文网其他相关文章！
