详解vue-cil和webpack中本地静态图片的路径问题解决方案

下面是 “详解vue-cil和webpack中本地静态图片的路径问题解决方案”的完整攻略：

问题描述

在使用Vue-cli和Webpack时，我们在组件或模板中引用本地或者网络图片时，会发现图片无法正常显示出来。

原因是因为Webpack在打包时，会将所有静态资源文件进行压缩打包，我们在代码中引用图片路径，实际上Webpack已经修改了路径或者将其包含在了main.js中，但是我们的图片文件不在main.js或者被修改了路径，导致页面无法显示。

解决方案

方案一：使用require关键字

<template>
  <div>
    <img :src="require('@/assets/logo.png')" alt="logo">
  </div>
</template>

通过require关键字，将图片作为一个模块引用进来，这样Webpack在进行打包时，就能够正确的处理图片的路径问题。

方案二：使用相对路径

<template>
  <div>
    <img :src="require(`@/assets/${imgName}`)" alt="Some Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgName: 'picture.png',
    };
  },
};
</script>

这种方式可以动态绑定图片名字，使用${}将图片名字替换。如果图片不在assets目录下，需要相对路径找到图片位置。

总结

使用上述两种方案就可以完美解决Vue-cli和Webpack中本地静态图片路径问题。

第一种方案不需要相对路径，但是需要在require函数中写上具体路径名。第二种方案可以解决具体路径名的问题，但是需要写上相对路径。

希望这篇文章能够帮助到您！