vue-cli3放在public文件夹下的图片为什么打包后路径错误

Question

这是我npm run build之后打开index.html页：

发现clas_qianbigb170.jpg文件找不到，但是在npm run serve的时候是有这个图片的，我的引入方式是：

<img src="/img/clas_qianbigb170.jpg" />

直接放在public文件夹下面，是不是哪里写错了？

Answer 1

获取静态资源不推荐这种写法 推荐这种写法require['@/img/clas_qianbigb170.jpg']

Answer 2

为啥放在public文件夹下,放在src下assets不挺好嘛,这样的话你这种写法就可以用了

Answer 3

你build之后，打开index.html肯定是不能访问本地的图片的，看你的js也是有问题的，因为你没有服务，给你放回资源,你要用，自己下个nginx部署玩。

Answer 4

有多个问题：

1. vue.config.js 没定义 publicPath；
2. 如果不是 hardcode 到 index.html 中的引用，不要放在 public 中。 public 中主要是放 robots.txt 或一些用于检测浏览器的 js 脚本（比如屏蔽IE8，这种脚本也不能放在 vue 中）。一般引用的静态文件（多指图片），应放入 assets ，并使用 require 等方式进行引用；
3. 测试 html 不可在本地直接双击打开，需要使用 HTTP 服务；