1. 程式人生 > >關於vue打包後圖片路徑找不到的問題

關於vue打包後圖片路徑找不到的問題

//asserts引入的靜態資源是相對路徑

//而static引入靜態資源時必須是絕對路徑

slides: [
{
//當asserts引入動態繫結的靜態資源時,需要以模組的方式匯入資源,
//將圖片作為模組載入進去
src: require(‘../../../asserts/img/pic1.jpg’),
title: ‘女人節優惠’,
href: ‘detail/yslqd’
},
{
src: ‘/static/img/pic2.jpg’,
title: ‘滿減優惠’,
href: ‘detail/ysllip’
}
]
因為有時候打包後的專案檔案,不一定是放在伺服器的根目錄下,這樣也會導致圖片找不到,可以在config檔案中的index.js中去配置
build: {
// Template for index.html
index: path.resolve(__dirname, ‘../dist/index.html’),

// Paths
assetsRoot: path.resolve(__dirname, ‘../dist’),
assetsSubDirectory: ‘static’,
//在這裡把/改成./,如果這裡加了./,那static資料夾引入的圖片也要加./,這樣無論打包後放到伺服器的哪一級目錄下,靜態資源都不會報錯
assetsPublicPath: ‘./‘
}
slides: [
{
src: require(‘../../../asserts/img/pic1.jpg’),
title: ‘女人節優惠’,
href: ‘detail/yslqd’
},
{
src: ‘./static/img/pic2.jpg’,
title: ‘滿減優惠’,
href: ‘detail/ysllip’
},
{
src: ‘./static/img/pic3.jpg’,
title: ‘精品巨惠’,
href: ‘detail/dior’
},
{
src: ‘./static/img/pic4.jpg’,
title: ‘精品巨惠’,
href: ‘detail/pdl’
}
]