Проект Vue не может найти изображение при использовании <a href>, но может найти его при использовании <img>
У меня есть этот проект Vue. Все, что я сделал, это запустил vue create foo и удалил весь предварительно созданный код, который появляется в папке src при запуске этой команды. Затем я добавил изображение в папку src и создал свой собственный App.vue, это все, что я в нем написал.
<template>
<div>
<img alt = "Vue logo" src = "./foo.png">
<a href = "./foo.png" download>foo</a>
</div>
</template>
<script>
export default {
}
</script>
Когда я затем пробую это с npm run serve, веб-сайт отображает изображение отлично, но ссылка для скачивания не работает. Пишет, что на сервере нет запрошенного файла или что-то в этом роде.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Загрузчик Vue автоматически преобразует атрибуты img src в шаблонах в запросы модуля webpack, но по умолчанию он не делает того же для ссылок.
Если вам нужно напрямую сослаться на файл, вы можете поместить его в каталог public/, чтобы обойти веб-пакет (используя путь относительно этого каталога, т.е. для файла в public/foo/bar.jpg вы бы использовали <a href = "/foo/bar.jpg">)
Кроме того, вы можете оставить файл там, где он есть, и скажите веб-пакету преобразовать <a href> URL-адреса в запросах модуля, так же, как это делает URL-адреса src изображений, изменив параметры transformAssetUrls:
/* Add to vue.config.js */
module.exports = {
chainWebpack: config => {
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap(options => {
// modify the options...
options = Object.assign(options, {
transformAssetUrls: {
a: "href"
}
});
return options;
});
}
}
Хороший вопрос, я должен был включить это в ответ, я добавил его сейчас.
Как я могу обратиться к нему, когда он находится в открытом доступе?