为什么我的图片无法在 Vue.js 2 中加载? [英] Why don't my images load in Vue.js 2?
问题描述
我正在尝试通过 Vue.js 2 中的相对路径加载我的图像，但似乎有些不对劲.我只是对 Vue 感到不知所措，希望得到任何指点.所述图像位于/src/assets/imgs 目录中.
以下是相关组件的相关代码片段.
<section class="容器源"><h2>{{标题}}</h2><div class="columns"><div class="column" v-for="source in source"><图:title="source"><img :src="imgPath + source + '.png'" :alt="source + 'logo'"><figcaption>{{ source }}</figcaption></图></节><脚本>导出默认{name: '来源',数据 () {返回 {标题:'新闻来源'，imgPath: 'src/assets/imgs/',来源:['半岛电视台-英语'、'美联社'、'英国广播公司新闻'、'英国广播公司体育'、'商业内幕'、'美国有线电视新闻网'、每日邮报"、娱乐周刊"、ESPN"、金融时报"、福克斯体育"、黑客新闻"、'ign','independent','mtv-news','国家地理','新科学家','路透社','techcrunch','经济学家','the-guardian-uk','the-赫芬顿邮报"、纽约时报"、《华盛顿邮报》]}}}
根据要求添加了我的项目(简单)文件树的屏幕截图.当然，这些图片都在imgs"文件夹中.
假设您使用的是 vue-cli 中的 webpack 模板，您可以简单地使用 静态资产.
<img :src="'./assets/imgs/' + source + '.png'"<小时>
或者，将你的图片放在 static 目录中，并用绝对路径引用它们，即
<img :src="'/static/imgs/' + source + '.png'"I'm trying to get my images to load via a relative path in Vue.js 2 but something seems off. I'm just getting my feet wet with regard to Vue and would appreciate any pointers. Said images are in the /src/assets/imgs directory.
Below are the relevant code snippets for the component in question.
<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>
Edit: Added a screenshot of my project's (simple) file tree upon request. Said images are in the 'imgs' folder, of course.
Assuming you're using the webpack template from vue-cli, you can simply use a relative path for static assets.
<img :src="'./assets/imgs/' + source + '.png'"
Alternatively, put your images in the static directory and reference them with an absolute path, ie
<img :src="'/static/imgs/' + source + '.png'"
这篇关于为什么我的图片无法在 Vue.js 2 中加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
