gpt4 book ai didi

javascript - 为什么我的图像不能在 Vue.js 2 中加载?

转载 作者:搜寻专家 更新时间:2023-10-30 22:32:22 25 4
gpt4 key购买 nike

我试图让我的图像通过 Vue.js 2 中的相对路径加载,但似乎有些问题。关于 Vue,我刚刚开始涉足,非常感谢任何指点。所述图像位于/src/assets/imgs 目录中。

以下是相关组件的相关代码片段。

File tree screenshot

<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”文件夹中。

最佳答案

假设您正在使用来自 vue-cli 的 webpack 模板,您可以简单地使用 static assets 的相对路径.

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

或者,将您的图像放在static 目录中并使用绝对路径引用它们,即

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

关于javascript - 为什么我的图像不能在 Vue.js 2 中加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44959724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com