web-dev-qa-db-fra.com

Comment accéder aux ressources avec Webpacker gem

Pourriez-vous m'expliquer comment accéder aux actifs à partir de Webpacker gem dans les composants vue.js? Par exemple, comment créer un div avec une image d’arrière-plan. J'ai essayé d'utiliser les dossiers/app/assets/images et/app/javascripts/assets, mais les images ne sont disponibles que dans la section modèle, mais pas dans la section style :( 

dans mon cas

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

fonctionne bien, mais

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

ne fonctionne pas :(

Qu'est-ce qui ne va pas?

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

Le contenu de Webpacker de New Rails est plutôt brut, c'est donc la configuration qui fonctionne pour moi:

config/webpacker.yml (pour Webpacker 3):

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

Fichiers JS:

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

en composant:

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

dans le modèle:

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

pointez le tilde ici - cela signifie que l'image est une dépendance de module

en CSS:

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

Pour une raison quelconque, le tilde ne fonctionne pas ici, donc le chemin relatif est utilisé.

9
sandrew

Si je comprends bien votre question, vous devrez trouver le fichier webpack.base.conf.js dans votre dossier build, puis trouver le code qui ressemble à ceci:

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

Ajoutez ensuite la ligne suivante à l’objet alias: 'assets': resolve('src/assets/'), qui fonctionnera pour le dossier assets situé juste en dessous du dossier src. Vous pouvez également changer la chaîne de clé de assets à n'importe quel nom d'alias de votre choix.

MODIFIER:

J'ai oublié de mentionner, pour accéder aux alias en code de style, vous devez le préfixer avec un ~ (telda) afin que assets devienne ~assets.

2
Rashad Saleh

Tu peux essayer 

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

Au lieu de 

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

Si vous avez installé sass-Rails gem, essayez ceci:

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

Puisque ceci est étiqueté avec Vue.js, je vais répondre pour cela. Aucune des autres réponses ne fonctionnait avec Vue 2.x. 

Pour les attributs

Une instruction webpacker require renvoie l'URL complète de l'actif requis (résolu en fonction de votre resolved_paths dans webpacker.yml). Sur cette base, vous pouvez faire quelque chose comme ceci:

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

Veuillez noter que les deux points qui lient l'attribut src sont liés au résultat de l'expression javascript.

Vous pouvez également utiliser des ancres d'ID en les ajoutant, par exemple avec SVG:

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

Les modèles Vue sont généralement précompilés en équivalents javascript. Par conséquent, une instruction require est nécessaire pour extraire les actifs au moment de la compilation et non à l'exécution.

Pour CSS urls, porté ou non

Utilisez simplement un tilde ~ et un chemin. Le chemin doit être relatif pour le fichier le contenant ou le resolved_paths à partir de 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;
}

Pour cette utilisation, il n'est pas nécessaire de require() de l'actif.

Veuillez noter: il existe une différence entre le développement et la production, en particulier si vous utilisez également des pignons. Faire simplement src="/assets/image.png" fonctionnera parfois en développement, mais pas en production .

0
adc