vue背景圖片資源載入問題
阿新 • • 發佈:2019-02-04
主要問題:
通過img的src載入圖片可以加載出來,但是通過css用圖片做背景時發現載入不出來
問題程式碼:
<template>
<div id="app">
<!--無法載入-->
<!--<div style="background:url('./assets/flower.jpg'); height:200px; width:200px">-->
<!--解決方法-->
<div :style="{background:url_back_img}">
xxxx
</div >
<img src="./assets/logo.png"/>
<img :src="back_img">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
back_img: require('./assets/logo.png'),
url_back_img: "url("+require('./assets/flower.jpg' )+")"
}
}
}
</script>
主要原因是編譯後目錄結構改變導致,我用了個粗暴的方法,直接require(“圖片路徑”),通過這種方式來直接載入圖片。
網上搜了下通過分析vue編譯過程來分析解決方法的,可以通過修改配置來實現。
下面這個部落格詳細分析各種情況下會出現的問題和產生的原因,並通過修改配置來解決相應問題。
具體參考:https://segmentfault.com/a/1190000012135787