我们知道,在<template>中引入图片只需要指明相对路径,打包后就可以正常使用了。
但是在data中引用图片是,在dev模式下只能写绝对路径才能找到图片,写相对路径是无效的,然而这样build打包后就GG了。
以为是路径的问题,其实是webpack的事:在Vue里动态生成的路径无法被url-loader解析到。
此时有两种解决方法:
-
直接将静态文件放在项目目录中的static文件夹中,然后正常写路径就可以了。
2.更好用的方法:通过import的方法将图片原路径引入:
直接使用 banner
即可