React + webpack 开发单页面应用简明中文文档教程(十)在 jsx
React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片React 入门系列教程导航React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
这种写法对于我这种具有代码强迫症的人来说,简直是无法忍受的。因此,我主导的项目开发中,都强制要求将所有的图片存放在 如果你看过我写的 针对这个问题,我的回答是:你不能因为自己吃一勺烩的盒饭,就把自己的代码写成盒饭。我们需要菜是菜,汤是汤,饭是饭的午餐。 用一个良好的代码整理方案,完全可以解决掉你说的这些问题。 也就是说,规矩,是TM最重要的。 好,我们将代码存放在 jsx 中使用图片创建 @/page/other/imgshow.jsx 文件我们创建一个 import React,{ Component } from 'react'
import Path from '@/tool/path'
export default class ImgShow extends Component {
render () {
return (
<div> <p>下面是插入的图片</p> <img src={Path('react.jpg')} alt='react' /> <p>下面是在 scss 中使用的背景图片</p> <div className='use_bg_img'></div> </div> ) } }
如上,我们写入代码,然后,我们需要在路由中引用该文件。这里我不给全部代码了哈。 // 引入代码
import OtherImgShow from '@/page/other/imgshow'
// 路由配置代码
<Route exact path='/imgshow' component={OtherImgShow} />
创建 @/tool/path.js 文件我们在上面引入了一个 我们在项目开发的时候,我们使用的一般都是根目录的开发模式。也就是说,我们是在 为了使我们的代码兼容这两种请求方式,我们就需要一个函数方法来处理这两种的差异,因此,这个文件的主要作用就是,辨识我们的代码是在生产环境还是开发环境,然后返回不同的图片引用前缀。 除此之外,还有一个用处是更加重要的。 那就是,我们开发的项目中的静态资源,很有可能使用 所以,我们如果在 好,上内容: const NODE_ENV = process.env.NODE_ENV
export default (src) => {
let prod_fix = ''
let img_fix = '/image/'
return NODE_ENV === 'production' ? prod_fix + img_fix + src : img_fix + src
}
如上,当我们确定生产的图片调用前缀是什么的时候,只需要修改 好,我们现在已经可以在浏览器中访问到我们的想要的效果了。 scss 中使用图片我们在 //$res: "/erjimulu/image/"; // 打包时用此路径
$res: "/image/"; // 本地开发是用此路径
我们修改一下这个文件 //$res: "/erjimulu/image/"; // 打包时用此路径
$res: "/image/"; // 本地开发是用此路径
.use_bg_img { width: 500px;height: 500px; background: url($res + 'react.jpg') 0 0; }
效果如下: 这里,我们用变量加图片名的方式,引用图片。在开发环境中,我们用一个变量,在进行打包编译的时候,我们修改一下这个变量,修改为我们的生产地址。然后就可以了。 我暂时没有想到如何在 不过和批量修改所有的图片地址相比,修改一个变量,还是要简单很多的。
好,这一片博文我们学习了如何引入静态资源目录中的图片,其实引入其他内容也是如此。 本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |