我正在尝试在Vue.js 2中使用相对路径加载我的图片,但似乎有些问题。我刚开始接触Vue,希望能得到任何指导。这些图片位于/src/assets/imgs目录下。
以下是相关组件的代码片段。
以下是相关组件的代码片段。
![File tree screenshot](https://istack.dev59.com/xwHiB.webp)
<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/ - yuriy636vue-cli
中的webpack模板(看起来是这样),那么请阅读此链接~https://vuejs-templates.github.io/webpack/static.html - Phil