如何使用webpacker gem访问资产

Question

您能解释一下如何从vue.js组件中的webpacker gem访问资产吗？例如 - 如何使用背景图像创建div。我尝试过使用/ app / assets / images和/ app / javascripts / assets文件夹，但图片仅在模板部分提供，但不适用于样式部分:(

在我的情况下

<template>
    <div id="home">
        <div id="intro">
            <img src="assets/cover-image-medium.png" alt="">
        </div>
    </div>
</template>

工作正常，但

<style scoped>
    #intro {
        height: 200px;
        background: url("assets/cover-image-medium.png");
    }
</style>

不工作：（

怎么了？

Answer 1

New Rails的webpacker非常原始，所以这是适合我的配置：

config / webpacker.yml（对于webpacker 3）：

resolved_paths: ['app/javascript/images', 'app/javascript/src']
compile: false
# ...

JS文件：

/app
  /javascript
    /packs
      # only entry point files
      vue_application.js
    /src
      some_component.vue
    /images
      logo.svg

组件中的

：

<script>
import 'images/logo.svg'
</script>

模板中的

：

<img src='~images/logo.svg' />

将波形符指向此处 - 表示图像是模块依赖项

CSS中的

：

<style lang='sass'>
#app
  background: url('../images/logo.svg')
</style>

由于某种原因，此处的波形不起作用，因此使用了相对路径。

Answer 2

如果我正确理解您的问题，您必须在webpack.base.conf.js文件夹中找到build文件，然后找到如下所示的代码：

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
  }
}

然后将以下行添加到alias对象：'assets': resolve('src/assets/')，这将适用于位于assets文件夹正下方的src文件夹。您还可以将密钥字符串从assets更改为您想要的任何别名。

修改

我忘了提及，要在样式代码中访问别名，您必须在其前面添加~（telda），以便assets变为~assets。

Answer 3

你可以尝试

background: url("/assets/cover-image-medium.png");  

而不是

background: url("assets/cover-image-medium.png");

Answer 4

如果您已安装sass-rails gem，请尝试以下操作：

<style scoped>
#intro {
    height: 200px;
    background: image-url("cover-image-medium.png");
}
</style>

Answer 5

因为这是用Vue.js标记的，所以我会回答。其他答案均不适用于Vue2.x。

对于属性

webpacker require语句返回所需资产的完整URL（根据您在resolved_paths中的webpacker.yml进行解析）。基于此，您可以执行以下操作：

<img :src="require('images/what-a-pain.png')" alt="Finally working" />

请注意，冒号会导致src属性绑定到javascript表达式的结果。

您还可以通过附加ID锚来使用它们，例如SVG：

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <use :href="require('images/icons.svg') + '#copy'" />
</svg>

Vue模板通常预先编译为javascript等效项，因此需要require语句才能在编译时而不是在运行时提取资产。

对于CSS urls，是否已定范围

只需使用波浪号~和路径。路径必须是 relative 到包含它的文件或resolved_paths中的webpacker.yml的路径。

.relative-pathed {
    background: url(~../../../assets/images/quitethepath.svg) center center no-repeat;
}
.works-after-editing-webpackeryml {
    background: url(~images/quitethepath.svg) center center no-repeat;
}

对于这种用法，无需require()资产。

请注意：开发和生产之间的路径有所不同，特别是如果还使用了链轮齿。简单地做src="/assets/image.png"有时会在开发中起作用，而在生产中却没有效果。