阅读 1422

webpack结合reactjs、vuejs项目中图片处理

unsplash@gui_vasconcelos
这篇文章主要整理一下自己在使用 webpack 结合 vuejsreactjs 开发过程中图片的处理方法。

我的需求

项目打包之后(假定输出目录为 dist),除了 index.html,将所有的静态资源上传至 cdn,而并非打包之后所有静态资源都在应用服务器上。

index.html 中的图片

因为是 SPA,模版页面唯一要处理的图片就是 favicon,这个资源在 IE 10 及以下浏览器只需要在 dist 根目录下存在 favicon.icon 文件(名称、后缀固定)即可,这种方式已经废弃,更好的做法是使用 link 标签引用,如:

<link rel="icon" sizes="192x192" href="/path/to/icon.png">
复制代码

处理这个图片,我尝试了三个方法:

1.html-webpack-pluginfavicon 属性配置

不适合我。

它会将文件输出至 dist 根目录下,与 index.html 同级,引用的是本地图片,而非 cdn 图片。

2.favicons-webpack-plugin

不适合我。

很强大,能根据你给的图片,生成所有类型的 icon 图标,问题有两个:首先是依赖了 phantomjs,墙外的站点,你懂得;再者引用的依旧是本地图片。

组件实现

适合我。

vuejsvue-head 组件,reactjsreact-helmet 组件,可以配置 link 方式的 favicon。图片打包上传 cdn 之后,页面的图片地址也为 cdn 地址。

其它

如果你的模版页面有其他诸如 src 图片引用,可参考 html-withimg-loader

页面 Head 大全

vuejs 项目中图片处理

前提:使用 vue-loader v15webpack 配置好 url-loaderalias

module.exports = {
    // ...其他配置
    modules: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)(\?.*)?$/,
                use: 'url-loader?limit=1024&name=statics/img/[name]-[hash:5].[ext]',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        alias: {
          Images: path.resolve('public', 'statics', 'img'),
        },
    },
    // ...其他配置
}
复制代码

template 中使用

<img src="~Images/logo.png">
<img :src="require('Images/logo.png')"> // 注意 v-bind
复制代码

有个问题我目前没有解决(精简代码),还请大神指教:

// 无效,提示无法找到这个资源
<img :src="require(`${img}`)">

data() {
  img: 'Images/logo.png'
}
复制代码
// 有效
<img :src="require(`Images/${img}`)">

data() {
  img: 'logo.png'
}
复制代码

已解决,官网对 require 的说明: A context is created if your request contains expressions, so the exact module is not known on compile time.

样式表中使用

貌似无法使用 alias,只能使用 ~ 和相对路径:

body {
  background: url(Images/logo.png); // alias,错误
  background: url(/Images/logo.png); // 有效,但是引用本地文件
  background: url(~Images/logo.png);
  background: url(../../statics/img/logo.png);
  background: url(./../../statics/img/logo.png);
}
复制代码

以 . 开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析

reactjs 中图片处理

前提:webpack 配置好 url-loaderalias

使用

不管是组件中还是样式表中,都可以使用 alias 和相对路径:

require('Images/logo.png');
require('../../statics/img/logo.png');
require('./../../statics/img/logo.png');
复制代码
body {
  background: url(Images/logo.png);
  background: url(../../statics/img/logo.png);
  background: url(./../../statics/img/logo.png);
}
复制代码

最后

./ 可有可无,相对路径是以当前的文件为基础,注意 ../ 层数问题;不要以 / 开头,因为最终都是引用的本地图片。 如有谬误,恳请斧正。

文章分类
前端