Рубрики
Без рубрики

Импорт изображений с WebPack (ER)

Узнайте, как ссылаться с изображениями WebPacker из вашего JavaScript, CSS и представлений в приложении Rails. Теги с WebPack, Rails, WebPacker, JavaScript.

Первоначально опубликовано rossta.net

WebPack не только для JavaScript. Вы можете установить изображения с ним тоже. WebPacker Делает его относительно легко работать с изображениями, но это по общему признанию, сбивая с толку: Изображения в JavaScript?

В этом посте мы продемонстрируем, как ссылаться на изображения WebPacker из вашего JavaScript, CSS и Rails Views. Следующие примеры были созданы с помощью рельсов 6 и WebPacker 4, но могут работать с другими версиями. Предварительные реквизиты для работы с WebPacker в проекте Rails также включают пряжа Отказ

Структура папок

Во-первых, где вы должны поместить ваши изображения? Это не имеет значения. Самое простое место для начала находится под вашим Приложение/JavaScript Папка, путь источника по умолчанию для WebPacker, например Приложение/JavaScript/Images Отказ

Для остальной части этого руководства мы предполагаем следующую структуру каталогов и файлы:

app/javascript
├── components
│   └── Taco.js
├── css
│   ├── main.css
├── images
│   ├── burritos.jpg
│   ├── guacamole.jpg
│   └── tacos.jpg
└── packs
    └── application.js

Не странно ставить изображения и CSS в папку под названием «JavaScript»? Зависит от. Если вы рассматриваете, с точки зрения WebPack, все является модулем JavaScript, это может быть не так странно. В противном случае можно переименовать Приложение/JavaScript или поместите ваши изображения в другом месте. Больше на этом ниже.

Изображения в js.

Чтобы ссылаться на изображение из JavaScript в вашем сборке WebPacker, просто импортируйте его как любой другой модуль. Реагировать не требуется для этого для работы;)

// app/javascripts/components/Taco.js
import TacoImage from '../images/tacos.jpg'

export default function({ title }) {
  return `
  

    
${title}

    
Tacos, yum

  

  `
}

В приведенном выше примере WebPack импортирует Tacoimage как URL к файлу. Другими словами, «модуль изображения» в WebPack экспортирует одно значение по умолчанию, строку, представляющее местоположение файла. Исходя из конфигурации WebPacker по умолчанию, имя файла будет выглядеть что-то вроде /packs/media/images/tacos-abcd1234.jpg Отказ

Импорт изображения также работает, если вы используете «CSS в JS», чтобы стиль реактивный компонент.

import React from 'react'

import TacoImage from '../images/tacos.jpg'

const styles = {
  backgroundImage: `url(${TacoImage})`,
}

export default function ({ title }) {
  return (
    

      {title}!
    

  )
}

Заинтересованы узнать больше о WebPack на Rails? Я создаю курс.

Подписаться на Rossta.net, чтобы получить обновления.

Изображения в CSS.

В сосредоточении, при обращении к изображениям в CSS, вы бы использовали специальные Image-URL () помощник. В WebPack просто используйте стандарт URL () Выражение в CSS с относительным путем.

/* app/javascript/css/main.css */
.burritos {
  background-image: url("../images/burritos.jpg");
}

Вывод для правила стиля будет, опять же, выглядит что-то вроде Фоновое изображение: URL (/packs/media/images/burritos-efgh5678.jpg); Отказ Эта техника также будет работать на пути изображения в модулях CSS.

Изображения в CSS в модулях NPM

Один хитрый пакет, который стоит упомянуть, является объединение изображения, упомянутые в SCSS в рамках импортированного NPM модуля. Например, многие плагины JQuery Bundle их собственные активы SCSS и изображения. Когда WebPack обрабатывает эту поставку CSS, вы можете увидеть ошибку, как следующее, как в Этот вопрос на Stackoverflow :

Module not found: Error: Can't resolve '../img/controls.png'

Проблема в том, что путь не разрешается должным образом относительно вывода для этой поставной SCS. От WebPacker Docs :

Поскольку Sass/libsass не предоставляет перезаписи URL, все связанные активы должны быть относительно вывода. Добавьте отсутствующее переписывание URL, используя Resolve-URL-погрузчик. Поместите его непосредственно после погрузчика SASS в цепочке погрузчика.

Чтобы исправить это, вам может воспользоваться своими руками с помощью конфигурации WebPacker. Добавьте Решитель-URL-погрузчик и настроить в config/webpack/enducial.js :

yarn add resolve-url-loader

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader'
})

Это правило погрузчика, вставленное в трубопровод погрузчика для файлов SASS/SCSS, убедитесь, что правильный URL записан на вывод CSS с помощью WebPack.

Изображения в Rails Views

Вы можете быть привыкся к <% = image_tag 'tacos.jpg'%> Для ссылки изображения в комплекте на трубопроводе активов Rails. У WebPack есть похожий тег:



<%= image_pack_tag 'media/images/guacamole.jpg' %>

Примечание, поскольку WebPacker 4, префикс СМИ/ Нужно, и оставшийся путь представляет местоположение от вашего исходного пути WebPack.

Там улов. Это изменение может привести к следующей ошибке:

Webpacker::Manifest::MissingEntryError in Lunches#index
Showing /path/to/project/app/views/lunches/index.html.erb where line #4 raised:

Webpacker can't find media/images/guacamole.jpg in /path/to/project/public/packs/manifest.json.

guacamole.jpg Изображение не было найдено рельсами, но, если бы мы пытались рендеринг Tacos.jpg Изображение в нашем шаблоне, то есть <% = Image_pack_tag media/Images/tacos.jpg%> Изображение Taco с радостью визуализирует. Что дает?

Ваше приложение Rails не является избирательным в кухне. Разница в том, мы ранее импортировали Tacos.jpg Изображение в WebPack, но не guacamole.jpg Отказ

Один из способов исправить эту проблему – импортировать guacamole.jpg Изображение где-то в вашем графике зависимости WebPack. Нет необходимости снимать ссылку на импортированную переменную, потому что мы заботимся о побочной эффекте излучающего файла для рельсов на ссылку на вид.

import '../images/guacamole.jpg'

Еще один способ исправить эту проблему – импортировать все Изображения в Приложение/JavaScript/Images каталог. WebPack предоставляет специальную функцию для импорта многих файлов в каталоге в одном выражении: потребовать .Контекст Отказ Вы можете добавить это на ваш application.js пакет:

// app/javascript/packs/application.js

require.context('../images', true)

Это выражение рекурсивно требует всех файлов в Изображения каталог. В результате мы можем теперь сделать guacamole.jpg на рельсе вид.

Примечание: я рекомендую только использовать потребовать .Контекст Для ваших изображений, если вам нужно сделать их в ваших видах Rails; потребовать .Контекст Не нужно импортировать изображения в файлы JS, как ваши компоненты реагирования, как показано ранее.

Перенастройка

Если вы не чувствуете себя комфортно с Приложение/JavaScript Как исходный каталог для Изображения , вы можете либо переименовать исходный путь или добавить к набору разрешенных путей.

Переименовать Приложение/JavaScript , переименуйте каталог и скажите рельсам об этом в config/webpacker.yml.yml.

default: &default
  source_path: app/frontend

Чтобы добавить в набор разрешенных путей, где WebPack должен искать активы, кроме того, в Приложение/JavaScript :

default: &default
  resolved_paths:
    - app/assets

Дайвинг глубже

Я должен признать, что несколько лет назад я впервые услышал о WebPack, я был супер-запутанным. Я понял, что это модуль JavaScript Bundler. Как на земле это обрабатывает изображения?

Краткий ответ, конечно, это Это зависит от Отказ Как правило, WebPack будет относиться всем, что он может понять как модуль JavaScript. Чтобы помочь WebPack понять изображения, проекты добавляют «загрузчик» (или погрузчики) в конфигурацию WebPack. Подходящий погрузчик будет знать, как обрабатывать файл изображения и выводить представление чего-либо, как встроенная строка Base64, которую можно манипулировать в JavaScript.

Чтобы помочь WebPack понять изображения, файлы SVG и шрифты в проекте Rails, WebPacker добавляет файловой погрузчик упаковка. Этот пакет изменит импортированный файл в качестве побочного эффекта сборки и возвращает путь к файлу в виде содержимого модуля.

Для получения дополнительной информации о том, как WebPack работает с изображениями, проверьте Документы управления активами Отказ

Я также собрал демонстрацию образца Rails 6 WebPacker Demo Project на Github для более контекста:

Оригинал: “https://dev.to/rossta/importing-images-with-webpacker-2302”

Читайте ещё по теме: