Ссылание на изображения из файла JavaScript Webpack

Чтобы сослаться на тег изображения из файла JavaScript file, затребуйте файл:

1
2
3
4
5
6
7

// assets/app.js

// возвращает финальный публичный путь к этому файлу
// путь относителен этого файла - к примеру, assets/images/logo.png
import logoPath from '../images/logo.png';

let html = `<img src="${logoPath}" alt="ACME logo">`;

Когда вы require (или import) файл изображения, Webpack копирует его в ваш каталог вывода и возвращат финальный, публичный путь к этому файлу.

Ссылание на изображения из шаблона

Чтобы сослаться на файл вне файла JavaScript, обрабатываемого Webpack - вроде шаблона - вы можете использовать метод copyFiles(), чтобы скопировать эти файлы в ваш финальный каталог вывода. Для начала, включите его в webpack.config.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// webpack.config.js

  Encore
      // ...
      .setOutputPath('public/build/')

+     .copyFiles({
+         from: './assets/images',
+
+         // необязательный целевой путь, относительно dir вывода
+         to: 'images/[path][name].[ext]',
+
+         // если подключено версионирование, добавьте также хеш файла
+         //to: 'images/[path][name].[hash:8].[ext]',
+
+         // копируйте только файлы, совпадающие с данным паттерном
+         //pattern: /\.(png|jpg|jpeg)$/
+     })

Затем перезапустите Encore. Когда вы это сделаете, он даст вам команду, которую вы можете выполнить для установки недостающих зависимостей. После выполнения этой команды и перезапуска Encore, вы закончили!

Это скопирует все файлы из assets/images в public/build/images. Если у вас подключено версионирование, скопированные файлы будут включать в себя хеш, основанный на их содержании.

Чтобы отобразить внутри Twig, используйте функцию asset():

1
2
3
4
5

{# assets/images/logo.png был скопирован в public/build/images/logo.png #}
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

{# assets/images/subdir/logo.png был скопирован в public/build/images/subdir/logo.png #}
<img src="{{ asset('build/images/subdir/logo.png') }}" alt="ACME logo">

Убедитесь в том, что вы включили опцию json_manifest_path, которая указывает функции asset() считывать финальные пути из файла manifest.json. Если вы не уверены, какой путь аргумента передать функции asset(), найдите файл в manifest.json и используйте ключ в качестве аргумента.