VueJs, динамически загружающий src, не работает
Я пытаюсь динамически загрузить изображение VueJs, чтобы я мог изменить его позже, но я продолжаю получать сообщение об ошибке «404 not found».
Вот тег img
<img class = "image" :src = "imageSrc" alt = "image">
и js-код.
export default {
data () {
return {
imageSrc: '@/assets/gallery/images/20211005_0044.jpg'
}
}
Если я поставлю тот же путь прямо в img, вот так, это работает, поэтому изображение существует. Я также пытался использовать ref и изменять src таким образом, а затем сначала загружалось изображение (с путем непосредственно в src), но как только я пытался его изменить, я возвращал ошибку 404 not found.
Примечание. Я видел этот вопрос Динамическая загрузка Vuejs image src не работает, но это тоже не помогло.
Спасибо.
Я использую v-bind:src = "imageSrc" в своем коде и imageSrc = "imageSrc: '@/assets/gallery/images/image.jpg'", это не работает, но когда я указываю тот же путь (imageSrc: ' @/assets/gallery/images/image.jpg') в src (без использования v-bind), он работает, поэтому путь правильный. Я попробовал решение, указанное в связанном вопросе, но это не помогло, и я получил то же сообщение об ошибке. на данный момент я не использую «требовать»
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Примечание: весь этот ответ использует require для решения проблемы. Я не знаю обходных путей, позволяющих избежать явных утилит импорта.
Здесь есть пара особенностей Vue/Webpack.
Во-первых, Webpack знает только, как преобразовать определенный ограниченный набор спецификаций пути импорта в соответствующие URL-адреса в окончательной сборке. Использование переменной data в качестве значения реквизита :src не является поддерживаемым синтаксисом: Webpack просто видит это как общую переменную и не будет ее преобразовывать.
Как упоминалось в вопросе , указанном выше , первым шагом к решению проблемы является использование синтаксиса require() следующим образом:
<img class = "image" :src = "imageSrc" alt = "image">
export default {
data () {
return {
imageSrc: require('@/assets/gallery/images/20211005_0044.jpg')
}
}
}
Однако есть еще одна особенность, когда путь в require должен быть динамическим. Согласно этому ответу, Webpack не может импортировать файл, если его имя полностью указано как переменная. Другими словами, require(this.imageSrc) (где imageSrc — строковая переменная) работать не будет.
Обходной путь заключается в том, чтобы включить в переменную только подкаталог (или имя файла) и использовать статический префикс в строке, например:
<img class = "image" :src = "imageSrc" alt = "image">
export default {
data () {
return {
imageName: '20211005_0044.jpg'
}
},
computed: {
imageSrc () {
return require(`@/assets/gallery/images/${this.imageName}`);
}
}
}
Не могли бы вы подробнее объяснить, почему ответ на связанный вопрос не сработал для вас? Что интерполируется в атрибут src изображения? Это необработанная строка (начинающаяся с
@) или действительный URL-адрес, который просто указывает на неправильное место? В другом связанном вопросе stackoverflow.com/a/75881654/2977638 я обнаружил, что иногдаrequireприводит к созданию строки в кодировке base64, что также может быть проблемой для этого конкретного варианта использования.