web-dev-qa-db-ja.com

Webpacker Gemでアセットにアクセスする方法

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>

動作しません:(

どうしましたか？

ruby-on-railswebpackvue.jswebpack-dev-serverwebpacker
15
Alexey Poimtsev

新しい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>

何らかの理由でチルドはここでは機能しないため、相対パスが使用されます。

9
sandrew

質問を正しく理解した場合、buildフォルダ内の_webpack.base.conf.js_ファイルを見つけて、次のようなコードを見つける必要があります。

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

次に、aliasオブジェクトに次の行を追加します：'assets': resolve('src/assets/')。これは、assetsフォルダーの直下にあるsrcフォルダーで機能します。キー文字列をassetsから任意のエイリアス名に変更することもできます。

編集：

私は言及するのを忘れていましたスタイルコードでエイリアスにアクセスするには、assetsが_~_になるように、その前に_~assets_（telda）を付ける必要があります。

3
Rashad Saleh

あなたが試すことができます

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

の代わりに

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

これはVue.jsでタグ付けされているので、それに答えます。他の回答はすべてVue 2.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の場合、スコープ付きかどうか

チルダ_~_とパスを使用するだけです。パスは、それを含むファイルまたは_resolved_paths_からの_webpacker.yml_へのrelativeでなければなりません。

_.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()する必要はありません。

注意：特にSprocketsを使用している場合は、開発と製造のパスに違いがあります。単に_src="/assets/image.png"_を実行すると、開発で機能する場合がありますただし、プロダクションではありません。

1
adc

sass-Rails gemをインストールしている場合は、これを試してください。

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