<template> <div> <img src="@/assets/img/logo.png"> <!-- 直接写入项目路径 --> <img src="https://cn.vuejs.org/images/logo.png"> <!-- 直接写入外部路径 --> <img :src="logoImg"> <!-- import 引入data赋值 --> <img :src="logoImg1"> <!-- require 引入data赋值 --> <img :src="logoImg2"> <!-- 外部链接 data赋值 --> <div class="bgImgBox bgImg"/> <!-- css 设置背景图(~@) --> <div class="bgImgBox bgImg1"/> <!-- css 设置背景图(相对路径引) --> <div class="bgImgBox" :style="{'background-image': `url(${require('@/assets/img/cloud_log_blue_min.png')})`}" /> <!-- require 设置行间背景图 --> </div> </template> <script> import logo from '@/assets/img/logo.png' export default { data() { return { logoImg: logo, // import 引入 logoImg1: require('@/assets/img/logo.png'), // require 引入 logoImg2: 'https://cn.vuejs.org/images/logo.png' // 外部链接 } } } </script> <style> .bgImgBox{width: 32px;height: 32px;display: inline-block;} .bgImg{ background-image: url(~@/assets/img/cloud_log_blue_min.png); /* ~@ 引入背景图 */ } .bgImg1{ background-image: url(../../../assets/img/cloud_log_blue_min.png); /* 相对路径引入背景图 */ } </style>