1. 程式人生 > >vue背景圖片資源載入問題

vue背景圖片資源載入問題

主要問題:
通過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