爲什麼我的圖像不能加載到Vue.js 2中？

我試圖讓我的圖片通過Vue.js 2中的相對路徑加載，但有些東西似乎關閉。我只是對Vue感到厭煩，並且會很感激任何指示。所述圖像位於/ src/assets/imgs目錄中。爲什麼我的圖像不能加載到Vue.js 2中？

下面是相關組件的相關代碼片段。

<template> 
    <section class="container sources"> 
     <h2>{{ heading }}</h2> 
     <div class="columns"> 
      <div class="column" v-for="source in sources"> 
       <figure :title="source"> 
        <img :src="imgPath + source + '.png'" :alt="source + ' logo'"> 
        <figcaption>{{ source }}</figcaption>   
       </figure>   
      </div> 
     </div> 
    </section> 
</template> 

<script> 
export default { 
    name: 'sources', 
    data() { 
     return { 
      heading: 'News Sources', 
      imgPath: 'src/assets/imgs/', 
      sources: [ 
      'al-jazeera-english', 'associated-press', 'bbc-news', 'bbc-sport', 'business-insider', 'cnn', 
      'daily-mail', 'entertainment-weekly', 'espn', 'financial-times', 'fox-sports', 'hackernews', 
      'ign','independent', 'mtv-news', 'national-geographic', 'new-scientist', 'reuters', 'techcrunch', 'the-economist', 'the-guardian-uk', 'the-huffington-post', 'the-new-york-times', 
       'the-washington-post' 
      ] 
     } 
    } 
} 
</script>

編輯：新增根據要求我的項目的（簡單）的文件樹的屏幕截圖。當然，所述圖像在「imgs」文件夾中。

來源

2017-07-06 Collins Orlando

檢查什麼'src'被分配到的圖像，你的代碼工作正常，可能路徑需要一些調整。 https://jsfiddle.net/s379dL6s/ – yuriy636

@ yuriy636我得到了'正確的'路徑，就像在一個簡單的.html文件中所引用的那樣，但是圖像不會加載。我不知道他們爲什麼不這樣做。 –

你可以發佈你的文件樹的截圖嗎？ – aprouja1

假設您使用vue-cli的webpack模板，您可以簡單地使用static assets的相對路徑。

<img :src="'./assets/imgs/' + source + '.png'"

或者，把你的圖片在static目錄，並以絕對路徑引用它們，即

<img :src="'/static/imgs/' + source + '.png'"

來源

2017-07-07 00:32:29 Phil

你好。我實際上在發佈這個問題之前去了你建議的頁面。他們沒有提出任何建議我也嘗試了一種類似的方法來處理你的建議，但沒有布埃諾。 –

@CollinsOrlando檢查您的瀏覽器*網絡*控制檯。查找圖像文件請求。他們看起來怎麼樣？ – Phil

狀態：404與預期的一樣。這裏是截圖的鏈接。 http://imgur.com/AAbVpHN.png。忽略小狗的圖像。這些都是隨機的Google圖片鏈接。 –

爲什麼我的圖像不能加載到Vue.js 2中？

回答

相關問題