Тильда не преобразуется в абсолютный путь при динамическом использовании
Я хочу создать 3 карты динамически. У каждой карты есть изображение, и я хочу динамически установить путь для каждой из них, но я не могу использовать тильду ~, потому что тильда не преобразуется в абсолютный путь:
<img
:src = "'~/assets/images/how-to-use/image1.jpg'"
:alt = "part.title"
/>
Я получаю эту ошибку:
GET http://localhost:3000/~/assets/images/how-to-use/image2.jpg 404 (Page not found: /~/assets/images/how-to-use/image1.jpg)
Я установил свой buildAssetsDir на example, но я даже не могу сделать это:
<img
:src = "'example/assets/images/how-to-use/image1.jpg'"
:alt = "part.title"
/>
этот код не будет работать после времени сборки. но почему?
ty, я думал, что ~ должен преобразовать модуль в абсолютный путь. Я использовал nuxt2 раньше. Как я могу использовать файлы активов динамически? Мне нужно что-то вроде функции nuxt2 `require`
Извините, я пропустил, что это было nuxt; да, в этом случае ~ должен сопоставляться с srcDir (который обычно совпадает с rootDir), но в вашем случае, похоже, он проходит прямо через отображаемый URL-адрес (где он интерпретируется как домашний адрес пользователя). Извините, я я недостаточно хорошо разбираюсь в nuxt, чтобы помочь
Ответы 1
Если вы используете вите. Я нашел этот способ:
<script>
const glob = import.meta.glob("~/assets/images/how-to-use/*", {
eager: true,
});
const getImageAbsolutePath = (imageName: string): string => {
return glob[`/assets/images/how-to-use/${imageName}`]["default"];
};
</script>
Вы можете передать imageName (не забудьте расширение) этой функции и получить абсолютный путь.
Этот способ работает даже после сборки.
Вы не можете использовать это:
<img
:src = "'example/assets/images/how-to-use/image1.jpg'"
:alt = "part.title"
/>
но почему?
Это потому, что nuxt3 также изменит имя файла ресурсов, поэтому этот путь неверен.
важные заметки
requireне работает с вите- вы можете использовать
import image1Name from '../assets/images/how-to-use/image1.jpg'и использоватьimage1Nameв своем шаблоне. - вы всегда можете добавить свои изображения в общую папку эти способы работают после сборки
require — это Webpack, и сказать, что он не работает с Nuxt3, нельзя на 100 %. Nuxt3 использует Vite по умолчанию, но вы также можете подписаться на Webpack5. Правильным предложением было бы сказать: «require не работает с Vite, который является сборщиком по умолчанию, используемым Nuxt3».
~ не представляет собой абсолютный путь, он представляет ваш домашний каталог пользователя; обычно это не то же самое на сервере, что и на вашей локальной машине.