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

我试图让我的图片通过Vue.js 2中的相对路径加载，但有些东西似乎关闭。我只是对Vue感到厌烦，并且会很感激任何指示。所述图像位于/ src/assets/imgs目录中。为什么我的图像不能加载到Vue.js 2中？

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

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

来源

2017-07-06 Collins Orlando

检查什么'src'被分配到的图像，你的代码工作正常，可能路径需要一些调整。 https://jsfiddle.net/s379dL6s/ – yuriy636

@ yuriy636我得到了'正确的'路径，就像在一个简单的.html文件中所引用的那样，但是图像不会加载。我不知道他们为什么不这样做。 –

你可以发布你的文件树的截图吗？ – aprouja1

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

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

或者，把你的图片在static目录，并以绝对路径引用它们，即

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

来源

2017-07-07 00:32:29 Phil

你好。我实际上在发布这个问题之前去了你建议的页面。他们没有提出任何建议我也尝试了一种类似的方法来处理你的建议，但没有布埃诺。 –

@CollinsOrlando检查您的浏览器*网络*控制台。查找图像文件请求。他们看起来怎么样？ – Phil

状态：404与预期的一样。这里是截图的链接。 http://imgur.com/AAbVpHN.png。忽略小狗的图像。这些都是随机的Google图片链接。 –

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

回答

相关问题