为什么我的图像不能在 Vue.js 2 中加载？答案

【问题标题】：Why don't my images load in Vue.js 2?为什么我的图像不能在 Vue.js 2 中加载？
【发布时间】：2017-12-11 02:23:20
【问题描述】：

我正在尝试通过 Vue.js 2 中的相对路径加载我的图像，但似乎有些不对劲。我只是对 Vue 感到困惑，并希望得到任何指点。所述图像位于 /src/assets/imgs 目录中。

以下是相关组件的相关代码 sn-ps。

<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 分配给图像的内容，您的代码工作正常，可能路径需要一些调整。 jsfiddle.net/s379dL6s
@yuriy636 我得到了“正确”的路径，正如在简单的 .html 文件中引用它们时所预期的那样，但图像不会加载。我不知道他们为什么不这样做。
你能张贴你的文件树的截图吗？
@aprouja1 我已经包含了我的项目文件树的简单屏幕截图。
如果你正在使用来自vue-cli 的 webpack 模板（看起来像你），那么请阅读这篇文章~vuejs-templates.github.io/webpack/static.html

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

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

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

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

【讨论】：

你好。在发布此问题之前，我实际上去了您建议的页面。他们的建议没有任何效果。我也尝试了与您的建议类似的方法，但没有 bueno。
@CollinsOrlando 检查浏览器的 Network 控制台。查找图像文件请求。它们长什么样子？
状态：404 符合预期。这是屏幕截图的链接。 imgur.com/AAbVpHN.png。忽略小狗图像。这些是随机的 Google 图片链接。
@CollinsOrlando 也许表达式没有处理模板文字。试试:src="'./assets/imgs/' + source + '.png'"
非常感谢您的建议。不幸的是，我已经尝试过（大部分），但无济于事。我会查看您在上面发布的链接。

【解决方案2】：

这应该可以工作

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

【讨论】：

为什么要这样做？请编辑您的问题以包含解释以帮助未来的读者
Muuuuuito obrigado, funcionou perfeitamente para mim.

【解决方案3】：

在我的例子中，我使用了 ../assets/{name of image} ：

src/components/SomeComponent.vue

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

【讨论】：

【解决方案4】：

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

从“@/assets/myImage.png”导入 img

然后在一个变量中引用导入的图片文件：图片：图片，

然后最后将img src到img标签： :src="图片"

【讨论】：