1、使用require,在不调整目录结构的情况下读取图片
缺点:由于common.js只允许使用字符串字面量,故不利于组件化,灵活性较差
<template>
<div id="app">
<img :src="url1" alt="图片1">
<img :src="url2" alt="图片2">
</div>
</template>
我们的图片要用require引进来,静态资源都要用require引入
data(){
return{
url1:require('../images/one.jpg'),
url2:require('../images/two.jpg')
}
}
2、使用import引入
<script>
import logo from './images/logo.jpg'
export default {
data(){
return{
src:logo
}
}
</script>
3、绝对路径访问
把图片放到静态资源目录static目录下(build会将static目录中的文件或文件夹按照原本的结构放在dist目录下),并用、static绝对路径访问
<template>
<div id="app">
<img :src="src" alt="图片1">
</div>
</template>
data(){
return{
src:`/static/images/logo.jpg` //反引号
}
}