项目打包后图片显示错误

项目打包后图片显示不正确

项目的打包就以webpack来举例了，我的方法具有一定的借鉴意义，酌情使用。

关于项目打包后图片显示不正确的问题，出现这种问题的原因的有很多种，网上也有很多解决方案。

我这里说的就是其中的一种错误及其解决方案：图片路径错误。【注意：不是路径写错了，写错了自己改一下。】

我先说一下我的错误：

• 在开发环境下，图片是没有任何问题的，但是打包完成之后再去运行程序就会发现图片出错了。
• 使用场景是我在使用 JavaScript动态切换图片：
  • 我在Html中引入了一张图片。
  • 点击这张图片时，把这张图片切换成另外一张图片。
  • 我们一般的操作就是在点击这张图片时，使用 JavaScript动态置换一下这个图片的路径。【这个操作本身没有任何问题】

---

在说出错的原因之前，我先解释一下webpack中能加载的图片file-loader 和 url-loader的区别。

• file-loader:

  使用file-loader对图片进行打包时，file-loader会把图片移动到你的输出文件(outputfile)下，一般情况都是dist文件夹，file-loader还会对文件名字进行处理，事后就会返回相对dist文件夹的一个路径。

• url-loader：

  url-loader相对于file-loader来说，url-loader加了一个limit限制,一般是这样写的：

  
  rules: [
      {
        test: /\.(png|jpeg|gif|webp)$/,
        use: {
          loader: 'url-loader',
          options: {
            // url-loader的limit配置项
            limit: 10000
          }
        }
      }
    ]
  

  limit限制的图片大小，不是url只能转这么大的图片，而是小于limit限制大小的图片，都会被url-loader转换成base64编码放到src路径上，这样的话就可以减少一次HTTP请求。

  url-loader显示默认是10000，就是小于8kb的图片默认都会被转换成base64编码。【这里就是问题出现的根源】。

  • 这里对图片大小的设置，自己酌情设置，因为图片过大的话，base64字符串也会非常长，还不如去发一次http请求。

---

问题怎么出现的呢，就是我在HTML里引入的图片，在打包过后都被转换成了base64编码放在那里，这就没有什么路径不路径的问题了，因为base64编码本身就是一个图片编码。

但是呢，我点击了图片之后，JavaScript设置的是一个路径，路径你在开发环境中是可以找到的，但是一打包都被转换成base64了，你设置的这个路径就没意义了，所以就出错了。

网上有很多方法是把这些图片的路径做成一个json文件，就像这样：

{
	"imgPath":[
        {"img":"这是路径"},
        {"img1":"src/images/img.jpg"}
	]
}

但是，仔细想想，我们把这个文件引进来，然后在js设置JSON文件中的路径，和我们直接设置路径好像没什么区别，就是路径放到了一个文件里而已。

解决方案：

• 说到这里，解决方案就很明显了：直接把JavaScript里设置路径的更换一下，直接设置成base64编码就好了，这样的话，即便url-loader给我们转成了base64编码，但是我们点击图片时切换成另外一片设置的也是一个base64编码，这样就不会出现问题了。

• 当然，如果我们直接在js里写这么多的base64编码，肯定是不好的，因为base64编码是很长，动辄就是上千个字符，所以我们一般都会把这些base64做成一个json文件引进来，就像这样：

  {
      "base64":[
          {"img":"这里base64编码"},
          {"img1":"base64编码"}
      ]
  }
  

  或者做成一个object放到我们的js里，就像这样：

  var imgMatch = {
      "img"："base64编码",
      "img1":"base64编码"
  }
  

  这样做的最大的好处，就是让代码好管理。

---

后续：

• 这个问题是我在接触electron+vue做的项目时碰到的，解决方案就是用的我说的这种方案。

• 在electron+vue中，有个static存放静态文件的文件夹，这个文件夹里放的文件，在打包的时候，会原封不动的拷贝到输出目录下。

• 所以我直接在合格文件下新建一个json文件，把我需要的改的小图片做成base64，然后在页面中引进去。

• 其他项目相比也是一样的，即便没有这个静态文件夹，我们那么做，无非就是把json文件也通过webpack进行了转化而已，不会影响最终的加载。