我試圖讓我的圖片通過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」文件夾中。
檢查什麼'src'被分配到的圖像,你的代碼工作正常,可能路徑需要一些調整。 https://jsfiddle.net/s379dL6s/ – yuriy636
@ yuriy636我得到了'正確的'路徑,就像在一個簡單的.html文件中所引用的那樣,但是圖像不會加載。我不知道他們爲什麼不這樣做。 –
你可以發佈你的文件樹的截圖嗎? – aprouja1