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

我可以尝尝你么
  • 69

图片描述

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

图片描述
图片描述

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

图片描述

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

回复
阅读 5.7k
7 个回答

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

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

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

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

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

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

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

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

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

@这种方式,比如:src="@/assets/1.png"

你知道吗?

宣传栏