使用 v-for 时的 Vue.js 资源文件路径

我刚刚开始使用 Vue.js，在加载静态图像（例如我的徽标）时访问资产文件夹非常简单：

<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}
      ]
    }
  }
}

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

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

查看文档后我发现了这个https://vuejs-templates.github.io/webpack/static.html https://vuejs-templates.github.io/webpack/static.html

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

资产处置规则

• 相对 URL，例如./assets/logo.png 将被解释为模块依赖项。它们将被替换为基于 Webpack 输出配置的自动生成的 URL。

• 无前缀 URL，例如assets/logo.png 将被视为与相对 URL 相同，并转换为 ./assets/logo.png。

• 以 ~ 为前缀的 URL 被视为模块请求，类似于 require('some-module/image.png')。如果您想利用 Webpack 的模块解析配置，则需要使用此前缀。例如，如果您有资产的解析别名，则需要使用它来确保尊重该别名。

• 根相对 URL，例如/assets/logo.png 根本没有被处理。

这是 webpack 而不是 vue 的问题吗？如此易于使用的库却使文件路径之类的东西变得复杂，这似乎很疯狂。

我在 Vue.js 论坛上发布了这个问题，Linus Borg 给了我答案：

这些解释仅涉及 HTML 或 CSS 中使用的资源路径。在这些中，各自的 webpack-loader 可以识别这些路径并管理它们。

但是如果你的 Javascript 中有路径，webpack 无法推断这些字符串应该被视为路径（它无法“理解”你的程序并看到这些字符串稍后将在 HTML 中使用），所以你必须明确地告诉 webpack通过使用 require()，这些字符串确实是依赖项的路径。

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}
      ]
    }
  }
}