Куда поместить изображения с помощью Svelte Kit

Question

Я использую Svelte некоторое время, и теперь я перешел на Svelte Kit, чтобы добавить несколько страниц. Я хочу добавить несколько изображений на свой сайт, но я не знаю, куда их поместить. В Svelte я бы просто вставил их public/imagesно нет publicпапка со Svelte Kit (я установил его с помощью npm init svelte@next my-app если это имеет значение). Вставил бы я их static?

Спасибо!

Answer 1

Я рекомендую размещать изображения под , а не . Например, вы можете сделатьsrc/lib/imagesилиsrc/lib/assetsпапку и положить их туда.

Причина в производительности:

Для файлов, импортированных из любого места подsrc, во время компиляции Vite добавляет хэш к имени файла.myImage.pngможет закончиться какmyImage-a89cfcb3.png. Хэш основан на содержимом изображения. Поэтому, если вы измените изображение, оно получит новый хэш. Это позволяет серверу отправлять браузеру срок действия кэша с очень большим сроком действия, поэтому браузер может кэшировать его навсегда или до тех пор, пока он не изменится. Это истечение срока действия кеша на основе ключа, который, по IMO, является лучшим: кэшируется ровно столько, сколько нужно. (Отправляет ли сервер на самом деле правильные заголовки кэширования в ответе, может зависеть от того, какой адаптер SvelteKit вы используете и на каком хосте вы находитесь.)

Напротив, изображения ниже не имеют хэша, добавленного к их имени. Вы можете использоватьstaticкаталог для таких вещей, какrobots.txtкоторые должны иметь определенное имя файла. Поскольку имя файла остается неизменным даже при изменении его содержимого, эти файлы по необходимости в конечном итоге имеютcache-controlзначение, которое включаетmax-age=0, must-revalidateиetag, что означает, что даже если браузер кеширует изображение, ему все равно приходится обращаться к серверу, чтобы проверить правильность кэшированного изображения. Это замедляет каждое изображение на вашем сайте.

Использование:

При размещении изображений подsrc/lib, вы ссылаетесь на них следующим образом:

      <script>
import img from '$lib/images/img.png';
</script>

<img src={img} alt="Image" />

Я рекомендую упростить, добавив в ваш проект svelte-preprocess-import-assets , который автоматизирует процесс импорта изображений и очищает ваш код. Вы пишете следующее, и он генерирует приведенный выше код:

      <img src="$lib/images/img.png" alt="Image" />

Answer 2

Поскольку Sveltekit использует Vitejs , на официальном веб-сайтеVitejs упоминается простое решение (нажмите здесь).
Сначала внутри тега script:

      <script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>

затем внутри вашего тега изображения просто используйте эту переменную,

      <img src="{imgUrl}" alt="" />

или,

      <div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>

Вы можете импортировать статические изображения из любого относительного пути.

Answer 3

есть также svelte-image.

«Svelte image — это препроцессор, который автоматизирует оптимизацию изображения с помощью Sharp.

Он анализирует вашimgтеги, оптимизирует или встраивает их и заменяетsrcсоответственно. (Внешние изображения не оптимизированы.)

Компонент изображения позволяетlazyloadingи показ нескольких размеров черезsrcset.

Этот пакет в значительной степени вдохновленgatsbyизображение.

Спасибо @jkdoshi за отличный видеоурок по Svelte Image».

-https://github.com/matyunya/svelte-изображение