Материал нового веб-пакера Rails довольно сырой, так что эта конфигурация мне подходит:

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>

По какой-то причине тильда здесь не работает, поэтому используется относительный путь.

Если я правильно понял ваш вопрос, вам нужно будет найти файл 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.

Поскольку он помечен тегом 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.

Вы также можете использовать якоря идентификатора, добавив их, например, с помощью 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-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" иногда работает при разработке, но не в производстве.

Ты можешь попробовать

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

Вместо того

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

Если вы установили sass-rails gem, попробуйте следующее:

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