Question

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

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

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

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

哪个可以解释一下，但我已经尝试过没有运气的每种方法：

资产解决规则



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



非加前缀的网址，例如assets / logo.png将被视为与相对URL相同并转换为./assets/logo.png。



前缀为〜的URL被视为模块请求，类似于require（'some-module / image.png'）。如果要利用Webpack的模块解析配置，则需要使用此前缀。例如，如果您有资产的解析别名，则需要使用以确保遵守别名。



根目录相对的网址，例如/assets/logo.png根本没有处理过。

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

Answer 1

我在Vue.js＆＃39;上发布了这个问题。论坛和Linus Borg回答我的问题：

这些解释仅涉及HTML或CSS中使用的资产路径。在这些中，各个webpack-Loader可以识别这些路径并对其进行管理。

但是如果你的Javascript中有路径，那么webpack就无法推断这些字符串应该被视为路径（它可以理解＆＃34;你的程序，并看到这些字符串稍后将被用于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

1 个答案: