Vue.js资产的文件路径使用V-的

问题描述：

当我刚刚使用Vue.js开始，这是简单的加载静态IMG当有足够的访问资产的文件夹，如我的标志：Vue.js资产的文件路径使用V-的

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

不过，我使用v-用于创建使用样本数据的几个列表项“M，这是我的模板：

<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

这或许可以解释它的文档看了，但我已经试过各种方法，没有任何运气提示：

资产解决规则

相对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'论坛这个问题，并莱纳斯博格回来给我的答案：

这些解释仅指在HTML或CSS中使用的资产路径。在这些中，相应的webpack加载器可以识别这些路径并对其进行管理。

但是，如果你的Javascript中有路径，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} 
     ] 
    } 
    } 
}

Vue.js资产的文件路径使用V-的

相关推荐