8

我刚刚开始使用 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}
      ]
    }
  }
}

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

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 被视为模块请求，类似于 require('some-module/image.png')。如果你想利用 Webpack 的模块解析配置，你需要使用这个前缀。例如，如果您有资产的解析别名，则需要使用以确保尊重别名。

  • 根本不处理与根目录相关的 URL，例如 /assets/logo.png。

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

4

1 回答 1

13

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

这些解释仅指 HTML 或 CSS 中使用的资产路径。其中，相应的 webpack-loaders 可以识别这些路径并管理它们。

但是如果你的 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}
      ]
    }
  }
}
于 2017-04-17T09:42:16.610 回答