Блог

Как и многие другие, я, похоже, не могу найти правильный путь..

использование @/assets/drive.jpg

Я пробовал: ~@/assets/drive.jpg , ~/assets/drive.jpg , @/assets/drive.jpg

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

 <div>
      class="hero-image"
      :style="{
          backgroundImage: `url('${imageUrl}')`,
          backgroundPosition: `${imagePosition}`
      }"
</div>
  

Есть причина, по которой это не работает.

@ это псевдоним, который интерпретирует webpack. Он будет делать это для импортированных файлов и <style> блоков, но когда у вас есть это в виде строки в шаблоне, он не будет обрабатывать это. Он также может не перемещать изображения из ресурсов в папку dist.

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

Например, вы могли бы иметь их изображения уже в вашем dist / assets, а затем использовать относительный путь в стиле, подобном: /assets/drive.jpg .

Если вам известен список изображений, которые вы будете использовать, вы можете добавить их с помощью require('./assets/drive.jpg') in the component или даже inline . Но поскольку эта работа выполняется во время компиляции, вы не сможете использовать require(imageUrl) .