Vue 3 Vite - динамический img src

Я использую Vue 3 с Vite. И у меня проблема 9X_vuejs3 с динамическим img src после сборки Vite 9X_vue3 для производства. Для статического img src 9X_vuejs3 проблем нет.


Он хорошо работает в обоих случаях: при 9X_vuejs3 работе в режиме разработки и после сборки 9X_vuejs3 vite. Но у меня есть имена некоторых изображений, хранящихся 9X_vue3 в базе данных, загружаемых динамически (значки 9X_vitejs меню). В этом случае я должен составить 9X_vitejs путь следующим образом:


(menuItem.iconSource 9X_vitejs содержит имя изображения, например "my-image.png"). В 9X_vuejs3 этом случае он работает при запуске приложения 9X_vite в режиме разработки, но не после производственной 9X_vite сборки. Когда Vite создает приложение для 9X_vuejs3 производства, пути меняются (все сборки 9X_vitejs помещаются в папку _assets). Источники статических 9X_vitejs изображений обрабатываются сборкой Vite, и 9X_vuejs3 пути меняются соответствующим образом, но 9X_vite это не относится к источникам составных 9X_vitejs изображений. Он просто принимает /src/assets/images/ как константу 9X_vue3 и не меняет его (я вижу это на сетевом мониторе, когда 9X_vite приложение выдает 404 not found для изображения 9X_vitejs /src/assets/images/my-image.png). Я попытался 9X_vitejs найти решение, кто-то предлагает использовать 9X_vuejs3 require(), но я не уверен, что vite может его использовать.

27
0
6
Общее количество ответов: 6

Ответ #1

Ответ на вопрос: Vue 3 Vite - динамический img src

Ответ 2022 г.: Vite 2.8.6 + Vue 3.2.31

Вот что у меня сработало для локальной и 9X_vitejs производственной сборки:




Обратите внимание, что это не работает с SSR


Vite docs: new URL

19
1

  • Как я могу использовать его с таким путем, как `@/assets/some_image.jpg`?<p><span cl ...

Ответ #2

Ответ на вопрос: Vue 3 Vite - динамический img src

Следуя документации Vite, вы можете использовать 9X_vue3 решение, упомянутое и объясненное здесь:

vite documentation

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

document.getElementById('hero-img').src = imgUrl

Я 9X_vite использую его в вычисляемом свойстве, динамически 9X_vitejs устанавливая пути, например:

    var imagePath = computed(() => {
      switch (condition.value) {
        case 1:
          const imgUrl = new URL('../assets/1.jpg',
            import.meta.url)
          return imgUrl
          break;
        case 2:
          const imgUrl2 = new URL('../assets/2.jpg',
            import.meta.url)
          return imgUrl2
          break;
        case 3:
          const imgUrl3 = new URL('../assets/3.jpg',
            import.meta.url)
          return imgUrl3
          break;
      }
    });

У меня отлично 9X_vuejs3 работает.

10
0

Ответ #3

Ответ на вопрос: Vue 3 Vite - динамический img src

Самое простое решение, которое я нашел для 9X_vuejs3 этого, — это поместить ваши изображения в папку public, расположенную в корне вашего каталога.

Например, вы можете создать 9X_vite папку images внутри папки public, а затем динамически 9X_vitejs связать изображения следующим образом:


Теперь 9X_vue3 ваши изображения должны правильно загружаться 9X_vitejs как при разработке, так и при производстве.

4
0

Ответ #4

Ответ на вопрос: Vue 3 Vite - динамический img src

require() или import(), используемые для решения этого сценария 9X_vuejs3 в приложениях Vue на основе Webpack, действительно 9X_vue3 являются конструкциями только Webpack

За 9X_vuejs3 кулисами Webpack обрабатывает такой динамический 9X_vue3 импорт, делая каждый файл в фиксированной 9X_vuejs3 части пути (/src/assets/images/) частью пакета приложения и 9X_vite доступным для импорта. В случае изображений 9X_vitejs это обычно означает создание какой-то внутренней 9X_vitejs карты вроде этой:

{
 'src/assets/images/image1.png' : 'assets/img/image1.hash.png',
  ...
}

Ключ - это путь к изображению 9X_vite в исходном дереве. Значение - это путь, созданный 9X_vitejs загрузчиком, ответственным за обработку 9X_vitejs изображений во время сборки (путь к изображению 9X_vitejs в связанном приложении). Эта карта используется 9X_vue3 Webpack во время выполнения для «разрешения» динамически 9X_vuejs3 генерируемых путей на реальные пути изображений

В 9X_vuejs3 Vite нет require(), но вы можете сделать что-то подобное, используя 9X_vuejs3 Glob Import, чтобы создать «карту», ​​аналогичную описанной 9X_vuejs3 выше, и использовать эту карту самостоятельно

Или вы можете 9X_vite использовать this plugin, чтобы сделать что-то подобное 9X_vue3 менее прозрачным способом ...

Подробнее см. this GitHub issue

ОБНОВЛЕНИЕ

Поскольку 9X_vitejs Vite использует Rollup за кулисами, использование 9X_vuejs3 plugin-dynamic-import-vars может быть другим решением, очень похожим 9X_vue3 на использование Webpack ...

НО в настоящее 9X_vue3 время limitation разрешает только относительные пути, что 9X_vuejs3 делает Glob Imports, вероятно, лучшим выбором

2
0

Ответ #5

Ответ на вопрос: Vue 3 Vite - динамический img src

Попробуйте следующие методы

const getSrc = (name) => {
    const path = `/static/icon/${name}.svg`;
    const modules = import.meta.globEager("/static/icon/*.svg");
    return modules[path].default;
  };

9X_vue3

2
1

  • Ответы только на код не особенно полезны. Пожалуйст ...

Ответ #6

Ответ на вопрос: Vue 3 Vite - динамический img src

Если у вас есть ограниченное количество 9X_vite изображений для использования, вы можете 9X_vite импортировать их все таким образом в свой 9X_vite компонент. Затем вы можете переключать их 9X_vuejs3 на основе реквизита компонента. 9X_Vue 3 Vite - динамический img src_vuejs3

9X_Vue 3 Vite - динамический img src_vue3

1
0