vue-cli引用图片资源的三种方式（template、script、style）

vue-cli引用图片资源的三种方式（template、script、style）

src/assets下新建文件夹images，用于存放所有图片资源

• template中标签引用：

<img src="@/assets/images/logo.png" />
<img :src="logo" />
<img :src="getLogo()" />

• script中脚本引用：

data() {
    return {
        logo: require('@/assets/images/logo.png'),
    }
},
methods: {
    getLogo() {
        return require('@/assets/images/logo.png')
    },
    //载入未知资源时，图片可能不存在，使用try解决报错
    tryGetLogo() {
        try {
            return require('@/assets/images/logo.png')
        } catch (error) {
            console.warn(error.message)
        }
    },
},

• style中样式引用：

.logo {
    background-image: url('@/assets/images/logo.png');
}