vue 引入图片的问题 - 已解决

为什么使用require

require 是 node 中的一个方法：他的作用是 “用于引入模块、 JSON、或本地文件”。

我们使用 require 来引入一个图片文件，require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）；而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。

src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的字符串路径则无法找到该图片，所以需要使用 require 方法来返回图片的编译路径。

参考文章：vue中引入图片为什么使用require

这里先给读者看看菜鸟的目录结构，不然不知道菜鸟路径是什么！

自己讲解

上面的用人话说：

1、如果路径直接写在 html 中，那么编译结果就是引入图片的路径。

2、如果把路径通过 字符串 复制给了 js 的变量，再由变量 动态绑定到 src ，那么对于编译结果来说，src 就是一个固定的字符串，而非图片路径，但是此时路径已经变化，并不是你传入的那个固定字符串！

实例 - src下 - img

例子：

<template>
  <div>
    <img src="../assets/imgs/wudu/du1.png" />
    <img :src="imgurl" />
    <img :src="imgurl2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: "../assets/imgs/wudu/du2.png",
      imgurl2: require("../assets/imgs/wudu/du2.png"),
    };
  },
};
</script>

结果（开发环境）：

结果（生产环境）-- nginx运行：

验证

这里验证了上述第二个结论！

实例 - public下 - 绝对路径 - img

例子：

<template>
  <div>
    <img :src="imgurl3" />
    <img :src="imgurl4" />
    <img :src="imgurl5" />
    <img :src="imgurl6" />
    <img src="static/imgs/start.png" />
    <img src="/static/imgs/start.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl3: "static/imgs/start.png",
      imgurl4: "/static/imgs/start.png",
      imgurl5: require("static/imgs/start.png"),
      imgurl6: require("/static/imgs/start.png"),
    };
  },
};
</script>

报错，其中 imgurl5、imgurl6 找不到资源！

原因：public 底下的文件不会走 require ！

参考vue-cli官网：cli.vuejs.org/zh/guide/ht…

结论

如果文件放在public目录下，需要通过绝对路径来引用它们，最优的写法是/static/imgs/start.png，和后面的背景可以统一！

去掉 imgurl5、imgurl6 再次运行（开发环境）：

去掉 imgurl5、imgurl6 再次运行（生产环境 - nginx）：

注意：

这里使用 vscode 的 live server插件 ，可能因为底层原理的原因，会让2、4两张图片显示不出来，其实都是可以的！

实例 - public下 - 相对路径 - img

<template>
  <div>
    <img :src="imgurl4" />
    <img src="../../public/static/imgs/start.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl4: require("../../public/static/imgs/start.png"),
    };
  },
};
</script>

结果（开发环境）：

结果（生产环境）：

结论

相对路径对于在 public 中的文件也是生效的 ！

实例 - public下 - 背景

<template>
  <div>
    <div class="bg" :style="getBg"></div>
    <div
      class="bg"
      :style="{ backgroundImage: `url(${backgroundimgurl})` }"
    ></div>
    <div class="bg bg2"></div>
    <div class="bg bg3"></div>
    <div class="bg bg4"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundimgurl: "static/imgs/start.png",
    };
  },
  computed: {
    getBg() {
      return { backgroundImage: `url(static/imgs/start.png)` };
    },
  },
};
</script>

<style scoped>
.bg {
  width: 200px;
  height: 100px;
  background-size: 100% 100%;
}
.bg2 {
  background-image: url("static/imgs/start.png");
}
.bg3 {
  background-image: url("../../public/static/imgs/start.png");
}
.bg4 {
  background-image: url("/static/imgs/start.png");
}
</style>

报错 bg2 的图片找不到

参考：Vue处理静态资源：public、assets目录

大概意思就是，不是绝对路径，可能找不到，需要配置东西！这里就和template里面不一样，template里面直接写static也是可以找到（当然不规范！）。

去掉 .bg2 再次运行（开发环境）:

去掉 .bg2 再次运行（生产环境）:

结论

反正之前菜鸟没有研究透彻主要是 live server 搞的鬼，用 nginx 后发现挺简单的，其实就是public底下的建议使用绝对路径 /static/imgs/xxx.png，其他建议使用相对路径，如果放 js 里面记得用 require 引入！