webpack结合reactjs、vuejs项目中图片处理-阿里云开发者社区

开发者社区> 行者武松> 正文

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);
}
复制代码

最后

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



原文发布时间:2018年06月29日
原文作者:zhCN_超
本文来源掘金,如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
2014秋C++第13周项目3参考-成绩处理函数版
课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703,课程资源在云学堂“贺老师课堂”同步展示,使用的帐号请到课程主页中查看。  【项目3 - 成绩处理函数版】项目2的另一种实现。输入、求最大/小值等所有功能都通过自定义函数完成。这种设计貌似比项目2麻烦,但其结构有更多的优点,尤其是当程序的规模更大时。通过这个项目,学会将数组
798 0
走进JavaWeb技术世界12:从手动编译打包到项目构建工具Maven
本文出自我的公众号:程序员江湖。 满满干货,关注就送。 小李的Build之路(上) 转自: 刘欣 码农翻身 2016-07-10 摘要:手工Build的烦恼要不是为了和女朋友留在一个城市,小李肯定去北上广奋斗去了。
1607 0
Web系统下Office文档的处理
在web环境中,我们经常遇到需要对Office文档进行各种各样的处理,如:格式转化、统计、修改等各种操作,如果使用Office的客户端对象模型直接处理,一般会遇到:效率低;服务器资源负载大等一系列问题,毕竟Office对象实现时主要针对的是客户端的使用而设计的,对于批量和大负载的处理自然效率欠佳。
756 0
今日推荐:10款在 Web 开发中很有用的占位图片服务
  设计网站时,将要使用的图像在一开始通常还不存在,这个时候布局是最重要的。然而,图像的尺寸通常是预先设置,实用一些占位图像可以帮助我们更好地预览和分析布局。   如今,有免费的占位图片自动生成工具可以使用,而不是手动创建这些占位符图像,可以节省我们的时间。
837 0
JavaWeb项目的中文乱码的原因以及Servlet中处理GET请求和POST请求编码过滤器
一、乱码原因 ①传输方和接收方采用的编码不一致。传输方对参数采用的是UTF-8编码而接收方却用GBK进行解析,当然是乱码。 ②Tomcat服务器默认采用的ISO8859-1编码得到参数值。虽然①中采用了同样的编码方式,但经过tomcat一处理,也会出现乱码(GET方式)   二、解决办法 方法一 每次传输都手动设置编码(GET方式传输数据) 传输方 String name =
1259 0
在 Ionic2 TypeScript 项目中导入第三方 JS 库
原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考。原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中引用之前的 JS 库还需要引入对应的类型定义,也就是 .d.ts 文件。
1043 0
Asp.Net Web API 2第七课——Web API异常处理
原文:Asp.Net Web API 2第七课——Web API异常处理 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.
783 0
+关注
行者武松
杀人者,打虎武松也。
14545
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载