Копіювання та посилання на зображення

Дата оновлення перекладу 2024-05-27

Копіювання та посилання на зображення

Потрібно послатися на статичний файл, наприклад, шлях до зображення для тега img? Це може бути складно, якщо ви зберігаєте свої ресурси поза коренем публічного документа. На щастя, залежно від вашої ситуації, існує рішення!

Посилання на зображення зсередини файлу Webpack JavaScript

Щоб послатися на тег зображення зсередини файлу JavaScript, вимагайте файл:

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',
+
+         // опціональниий цільових шлях, відносний до каталогу виведення
+         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 і використайте ключ в якості аргумента.