Как лучше всего использовать образ src в vue SFC?

Question

Я использую Laravel 5.8 и Vue 2.6 и пытаюсь использовать относительный путь для файла изображения в моем отдельном файловом компоненте. Я рассмотрел предложения в Как импортировать и использовать изображение в отдельном файловом компоненте Vue? , но не могу заставить его работать.

При попытке:

<template>
  <div id="app">
    <img src="./assets/logo.png">
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style> 

Я получаю это:

Этот относительный модуль не был найден: * ./assets/logo.png в ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-варианты! ./ node_modules / вю-погрузчик / Lib? vue-loader-options! :

Этот относительный модуль не был найден: * ./assets/logo.png в ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader / lib ?? vue-loader-options! ./ resources / js /components/xxxx.vue?vue&type=script&lang=js&

Я что-то упустил с webpack-mix или vue-loader?

Редактировать:

Использование простой статической ссылки (src = "/ assets / logo.png") работает на локальном сервере разработки, но не на рабочем сервере.

Я видел множество предлагаемых решений для этой базовой ссылки на файл изображения, но был озадачен тем, что существует так много возможностей, а не единой наилучшей практики. Опять же, надеясь найти наилучшую практику при использовании Laravel / Laravel Mix / Vue и SFC, которые работают в разработке и производстве.

Answer 1

Ответ на этот вопрос заключается в том, что использовалось неправильное развертывание для производственного сервера, которое пыталось указать на папку «public» вместо того, чтобы находить общедоступные файлы в public_html.

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

Единственное отличие заключается в Шаг 5 для Laravel 5.8 в файле server.php,

Изменить

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

На

if ($uri !== '/' && file_exists(__DIR__.'/public_html'.$uri)) {
    return false;
}

Относительные пути, такие как

<img src="img/logo.png">

вкллюбой сервер работает одинаково.

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

Answer 2

Существует 2 способа использования изображения в вашей настройке:

В комплекте с веб-пакетом

<img src="./assets/logo.png">

import image from "./assets/logo.png" 

Они связывают изображение с помощью веб-пакета, и с помощью этого решения вы получаетеПреимущества:

• Автоматическое встраивание с base64 для небольших изображений
• Автоматическое "глубокое" сжатие с любыми загрузчиками webpack
• Путь работает со всех путей в вашем приложении
• Проверка времени компиляции, если файл существует

Использование вашего собственного веб-сервера

const image = '/assets/logo.png'

const image = 'http://example.com/’

В этих решениях вам необходимо самостоятельно настроить свой веб-сервер для обслуживания этих файлов. ресурсы (или поместите их в общедоступный каталог)

• Простое переключение на другое изображение без перестройки интерфейса
• Более гибкий

Answer 3

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

<template>
    <div id="app">
        <img src="/public/img/widgets/logo.png" />
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
</style>

Учитывая, что у вас есть эта структура

Надеюсь, это поможет

Answer 4

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

<img src="@/assets/logo.png">

При этом будет использоваться веб-пакет и создана хешированная версия вашего logo.png. Или в JS используйте:

:src="require('@/assets/logo.png');