使用v-for时的Vue.js资源文件路径 [英] Vue.js assets file path when using v-for

问题描述

我刚刚开始使用Vue.js，加载静态img(如我的徽标)时访问Assets文件夹已经很简单了：

<img src="../assets/logo.png">

但是，我使用v-for使用示例数据创建了几个列表项，这是我的模板：

<ul>
    <li v-for="item in items" :key="item.id">
       <img v-bind:src="item.img" v-bind:alt="item.title">
       <h2 class="md-title">{{item.title}}</h2>
    </li>
</ul>

以下是在同一.VUE文件中声明的示例数据：

export default {
  name: 'front',
  data () {
    return {
      items: [
        {title: 'Google Pixel', img: '../assets/pixel.png', id: 1},
        {title: 'Samsung Galaxy S8', img: '../assets/s8.png', id: 2},
        {title: 'iPhone 7', img: '../assets/iphone.png', id: 3}
      ]
    }
  }
}

我的问题是img都是404，这看起来很奇怪，因为相同的路径在静态img上工作。如果我使用这样的绝对路径，它可以工作

https://media.carphonewarehouse.com/is/image/cpw2/pixelBLACK?$xl-standard$

浏览了文档后，我发现https://vuejs-templates.github.io/webpack/static.html

这可能可以解释这个问题，但我已经尝试了建议的每一种方法，但没有任何运气：

资产解析规则

• 相对URL，例如/Assets/logo.png将被解释为模块依赖。它们将被替换为根据您的webpack输出配置自动生成的URL。

• 非前缀URL(例如Assets/logo.png)将被视为与相关URL相同，并转换为./Assets/logo.png。

• 以~为前缀的URL被视为模块请求，类似于Required(‘Some-模块/Image.png’)。如果您想使用webpack的模块解析配置，则需要使用此前缀。例如，如果您有资产的解析别名，则需要使用来确保使用该别名。

• 根本不处理根相对URL，例如/Assets/logo.png。

这是webpack而不是VUE的问题吗？一个如此易于使用的库竟然会让文件路径这样的东西变得复杂，这似乎很疯狂。

推荐答案

我在Vue.js的论坛上发布了这个问题，莱纳斯·博格给了我答案：

这些说明仅涉及在HTML或CSS中使用的资源路径。在这些路径中，相应的webpack加载程序可以识别这些路径并对其进行管理。

但如果您的Java脚本中有路径，webpack无法推断这些字符串应该被视为路径(它无法理解您的程序并看到这些字符串稍后将在Html中使用)，因此您必须使用Require()明确地告诉webpack这些字符串确实是指向依赖项的路径。

export default {
  name: 'front',
  data () {
    return {
      items: [
        {title: 'Google Pixel', img: require('../assets/pixel.png'), id: 1},
        {title: 'Samsung Galaxy S8', img: require('../assets/s8.png'), id: 2},
        {title: 'iPhone 7', img: require('../assets/iphone.png'), id: 3}
      ]
    }
  }
}

这篇关于使用v-for时的Vue.js资源文件路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！