为什么我的图片在Vue.js 2中无法加载？

Question

我正在尝试在Vue.js 2中使用相对路径加载我的图片，但似乎有些问题。我刚开始接触Vue，希望能得到任何指导。这些图片位于/src/assets/imgs目录下。

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

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

- Collins Orlando

---

检查一下src被分配给图像的内容，你的代码没问题，可能路径需要一些微调。https://jsfiddle.net/s379dL6s/ - yuriy636

@yuriy636 我获取了“正确”的路径，就像在简单的 .html 文件中引用它们所期望的那样，但是这些图像就是无法加载。我不知道它们为什么不能加载。 - Collins Orlando

你能发布一下你的文件树截图吗？ - aprouja1

@aprouja1，我已经包含了一个简单的截图，展示了我的项目文件树。 - Collins Orlando

如果您正在使用vue-cli中的webpack模板（看起来是这样），那么请阅读此链接~https://vuejs-templates.github.io/webpack/static.html - Phil

你可能也遇到了这个bug~ https://github.com/vuejs/vue-loader/issues/814 - Phil

Answer 1

假设您正在使用vue-cli的webpack模板，您可以简单地使用相对路径来引用静态资源。

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

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

或者，将您的图片放置于 static 文件夹中，并使用绝对路径来引用它们，例如：

---

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

- Phil

---

你好。在发布这个问题之前，我确实去了你建议的页面。他们提出的所有建议都没有起作用。我也尝试了类似于你所建议的方法，但是没有成功。 - Collins Orlando

状态：404，如预期所示。这是屏幕截图的链接。http://imgur.com/AAbVpHN.png。请忽略小狗图片。它们来自于一个随机的谷歌图片链接。 - Collins Orlando

非常感谢您的建议。不幸的是，我已经尝试了（大部分）它们，但都没有成功。我会研究一下您上面发布的链接。 - Collins Orlando

@CollinsOrlando 祝你好运。似乎对于大多数遇到同样问题的人来说，使用“static”目录是有效的。 - Phil

使用静态文件夹出乎意料地解决了问题。非常感谢！ - Collins Orlando

Answer 2

这应该可以运行。

<img :src="image" >
data () {
  return {
    image: require('@/assets/images/pin.svg')
  }
},

- Bobby Kimutai

---

为什么这样做有效？请编辑您的问题并包括解释，以帮助未来的读者。 - Sterling Archer

非常感谢，对我来说完美地解决了问题。 - Richard Willian

Answer 3

在我的情况下，我使用了../assets/{图片名称} ：

src/components/SomeComponent.vue

<style>
    .black.square{
        background: url(../assets/logo.png);
    }
</style>

- Oleksii.B

Answer 4

在Vue.js中通过JS创建指向资产文件夹中列表的链接，您必须首先导入图像：

import img from '@/assets/myImage.png'

然后在变量中引用已导入的图像文件： image:img,

最后将img标签的src属性设置为该图像： :src="image"

- jaydon3987