vue项目引入图片遇到的问题

项目中有个编辑器，选中某个元件后或把一个图片的路径保存到数据库，但是这个图片带有一个哈希值，如果本地图片修改了，则需要同时修改数据库的内容,现在需要引入某些图片的地址不要加哈希值。

vue-cli 对webpack的配置进行了封装，大于4kb的图片会使用file-loader，小于4kb的会转换成base64。可以通过在vue.config.js中重写配置来实现需求。 node_modules@vue\cli-service\lib\config\base.js

...
const inlineLimit = 4096
...
const genUrlLoaderOptions = dir => {
  return {
    limit: inlineLimit,
    // use explicit fallback to avoid regression in url-loader>=1.1.0
    fallback: {
      loader: require.resolve('file-loader'),
      options: {
        name: genAssetSubPath(dir)
      }
    }
  }
}
...
webpackConfig.module
  .rule('images')
    .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
    .use('url-loader')
      .loader(require.resolve('url-loader'))
      .options(genUrlLoaderOptions('img'))

可以设置img的名称，去掉哈希

module.exports = {
  // filenameHashing: false,
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .use("url-loader")
      .tap((options) => {
        console.log(options);
        options.fallback.options.name = "img/[name].[ext]";
        return options;
      });
  },
};    

还可以在 import 的时候写入配置，更适合修改个别图片引用。

<template>
  <div id="app">
    <h2>{{ img }}</h2>
    <img :src="img" alt="" height="100" />
    <h2>{{ img2 }}</h2>
    <img :src="img2" alt="" height="100" />
  </div>
</template>

<script>
import img from "./assets/logo.png";
import img2 from "!url-loader?limit=1&outputPath=img&name=[name].[ext]!./assets/logo.png";

export default {
  name: "App",
  data() {
    return { img, img2 };
  },
  components: {},
};
</script>