React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片

版权声明：本文为 FengCms FungLeo 原创文章，允许转载，但转载必须注明出处并附带首发链接 https://cloud.tencent.com/developer/article/1435441

React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片

React 入门系列教程导航

React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念

React + webpack 开发单页面应用简明中文文档教程（二）创建项目

React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件

React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置

React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件

React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件

React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值

React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面

React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值

React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片

React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行

react 是一个非常自由的框架，如果没有强制的规范，每一个人都会发展出不同的编写风格。我遇到过很多 react 开发的项目，他们都把图片就进存放，简单说，就是存放在 src 目录下的某个地方，然后使用 ./xxx.jpg 这样的方式引入。

这种写法对于我这种具有代码强迫症的人来说，简直是无法忍受的。因此，我主导的项目开发中，都强制要求将所有的图片存放在 /public/image/ 文件夹中。根据不同的分类，建立不同的文件夹，然后存放好。

如果你看过我写的 vue 的博文，就知道，我是一个喜欢把同一类的东西放在一起的人。我是绝对忍受不了所谓的 css in js 这种狗屎解决方案的。有人说这样方便啊，我只需要引入一个 jsx 文件就解决了所有的问题啦！

针对这个问题，我的回答是：你不能因为自己吃一勺烩的盒饭，就把自己的代码写成盒饭。我们需要菜是菜，汤是汤，饭是饭的午餐。 用一个良好的代码整理方案，完全可以解决掉你说的这些问题。

也就是说，规矩，是TM最重要的。

好，我们将代码存放在 /public/image/ 文件夹中，我们如何在 jsx 中使用图片呢？

jsx 中使用图片

创建 @/page/other/imgshow.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 文件

我们在上面引入了一个 @/tool/path 文件，这里我有必要说明以下这个文件的作用。

我们在项目开发的时候，我们使用的一般都是根目录的开发模式。也就是说，我们是在 http://localhost:3002/ 这个根域下执行的。但事实是，我们的项目在到生产环境的时候，往往是在二级目录下面，甚至是更深层级的目录下面。因此，当我们使用 /image/react.jpg 这种相对根目录调用图片的方式，到生产环境下，不能正确的读取到我们需要的图片。因为真实的路径可能是 /love/image/react.jpg。

为了使我们的代码兼容这两种请求方式，我们就需要一个函数方法来处理这两种的差异，因此，这个文件的主要作用就是，辨识我们的代码是在生产环境还是开发环境，然后返回不同的图片引用前缀。

除此之外，还有一个用处是更加重要的。

那就是，我们开发的项目中的静态资源，很有可能使用 cdn 加速，到时候这些图片的调用方式就变成了 http://www.cdn.com/love/img/react.jpg 这种格式了。而在开发环境下，我们是不会这么调用的。

所以，我们如果在 jsx 文件中使用图片地址，我们用一个函数来返回图片路径，就可以让我们更方便的替换这些路径地址。

好，上内容:

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
}

如上，当我们确定生产的图片调用前缀是什么的时候，只需要修改 let prod_fix = '' 这个变量即可。

好，我们现在已经可以在浏览器中访问到我们的想要的效果了。

scss 中使用图片

我们在 @/style/style.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;
}

效果如下：

这里，我们用变量加图片名的方式，引用图片。在开发环境中，我们用一个变量，在进行打包编译的时候，我们修改一下这个变量，修改为我们的生产地址。然后就可以了。

我暂时没有想到如何在 scss 中自动处理这部分的方法。只能每次打包的时候，手工修改一下了。

不过和批量修改所有的图片地址相比，修改一个变量，还是要简单很多的。

我不太清楚将图片存放在 src 目录中的各种注意事项。因为我一看到这样做就恶心，所以就没有去尝试了。

好，这一片博文我们学习了如何引入静态资源目录中的图片，其实引入其他内容也是如此。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。