Проблема с отображением картинки в Vue.js

Я делаю flask приложение для конвертации форматов изображений, пользователь должен ввести url изображения и дальше выбрать формат сохранения но это не важно, важно то, что когда он полностью введет url квртинки она дожна отобразиться, но пока url не дейтсвителен, картика будет отображаться некрасивой иконкой, я хочу чтобы тег img был скрыт пока url не будет загружен без ошибки. Это тег img src берется из input text url, я пытался сделать так, чтобы при ошибке загрузке срыть img, а впротином случае сделать значение v-show img true, но видемо я сделал что-то не так помогите пожалуйста. Вот img:

<img :src="url_text" v-on="showImg" v-if="img_is_not_hide" @error="hideImg" id="preview">

Вот main.js

const form = new Vue({
    el: "#form",
    delimiters: ['[[', ']]'],
    data: {
        format: "...",
        url_text: "",
        img_is_not_hide: true
    },
    methods: {
        hideImg () {
            this.img_is_not_hide = false
        },
        showImg () {
            this.img_is_not_hide = true
        }
    }
})

Помогите пожалуйста)