圖像不顯示在vue.js和onsen用戶界面應用程序

Question

我已經使用下面的代碼來加載圖像在我的應用程序是基於Vue.js和Onsen用戶界面。但他們沒有顯示。

<div class="footer_logo"> 
    <ul> 
     <li class=""><img :src="logo" alt="logo" /></li> 
    </ul> 
    </div> 

我在劇本

import foot1 from 'static/assets/img/footerlogos/1.svg'; 
export default { 
    data() { 
     logo: foot1; 
    } 

使用下面的代碼編輯導入的圖像

項目結構

Answer 1

svg圖像可能是第一個改變它的問題，而不是檢查它是否工作 。它不工作遵循以下解決方案。

你必須把所有的圖像文件夾assets夾src不src/static

測試用這裏面。

• 創建src文件夾內的資產目錄（確保其資產不是資產或其他任何東西）
• 添加圖像例如：logo.jpg

比你的代碼

<div class="footer_logo"> 
    <ul> 
     <li class=""><img :src="logo" alt="logo" /></li> 
    </ul> 
    </div> 

並最終更新您的腳本

import foot1 from 'assets/logo.jpg'; 
export default { 
    data() { 
     logo: foot1; 
    } 

Answer 2

如果static文件夾是個項目電子根，你應該使用一些root suffix這樣的：

import foot1 from '@static/assets/img/footerlogos/1.svg'; 

export default { 
    data() { 
     logo: foot1; 
} 

參考文獻：

• Babel Plugin Root Import

Answer 3

添加一個相對路徑是這樣的：

import foot1 from '../static/assets/img/footerlogos/1.svg'; 

export default { 
    data() { 
     logo: foot1; 
}