webpack+vue,vue页面中引入图片的方法

277 阅读1分钟

纯webpack构建的vue项目,没有采用vue-cli。毕竟vue-cli都已经把很多配置配好了,学习不够深入

方法一 import 方式

    // template
    <img :src="homeIcon"/>

    //JS
    import cardPath from "@/assets/bottom/homeIcon.png"
    export default {
        name: "APP",
        data(){
            return {
               homeIcon: cardPath
            }
        }
    }

方法二 require方式

这个方法坑了我挺久的,参考了https://blog.csdn.net/Piconjo/article/details/105855172 文章以及webpack官网https://webpack.js.org/loaders/file-loader/#getting-started

意思是:我们能够使用CommonJS模块化语法,当esModule 设置为 false 的时候。