vue中无法显示静态加载的图片

Question

我在vue里这样加载图片，路径没有问题，但是浏览器里就是显示不出来

我自己配置的webpack没有用vue-cli
file-loader和url-loader都有

网上搜了一下用require的方式加载也是不行，显示undefin，实在搞不懂了

Answer 1

解决了，其实我的问题也没有描述清楚；

我用webpack打包后图片返回的是：/be9457cfc7d23aa065c0398beec2a11a.png这样的文件路径，

但是这个路径贴到浏览器里无法显示出来，

我把file-loader注掉后webpack用url-loader打包返回的就是base64可以正常显示图片

Answer 2

build一个工程出来，看看文件结构就知道了，一般这种情况就是路径问题

Answer 3

你是不是在开发环境把publicPath设成 / 了

Answer 4

1.用背景图片
2.图片放在static文件夹下
3.用require引入

Answer 5

1.可以将图片放在webpack不打包构建的目录下，比如static，然后img src=‘/static/xxx/xxx’;
2.还可以将图片放在assets下，但是需要动态import或者require后定义成一个变量，再赋值给img标签的src属性。

Answer 6

将图片src定义为一个变量 然后再img标签的src赋值为该变量

Answer 7

用@这种方式，比如：src="@/assets/1.png"