Блог

Главная - Вопросы по программированию - Vue 2 js замена 1 изображения из v-для img src

Vue 2 js замена 1 изображения из v-для img src

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть сетка с 3 столбцами, которые я сопоставляю с изображениями, которые имеют img-src, предоставленные axios на моей веб-странице.

 <div class="row my-row" v-for="(banner, index) in bannerArray" :key="index">
  <div class="banner-section">
    <div class="banner-name">
      <h3>{{banner.banner_position}}</h3>
    </div>
    <div class="preview-home-banner">
      <img :src="bannerArray[index].banner_url" alt="image_banner" class="image-banner">
    </div>
          <div class="row my-row">
            <input type="file" id="file-upload" accept="image/png, image/jpg ,image/jpeg" @change="onFileChange(index)"/>
          </div>
</div>

data () {
    return {
      file: null,
      bannerArray: [],
      showNotifModal: false,
      homeBannerPreview: null,
      contactUsBannerPreview: null,
      aboutBannerPreview: null,
      communityBannerPreview: null
    }
  },
  mounted () {
    this.getBannerList()
  },
  methods: {
    getBannerList () {
      axios.get(ConfigFile.basic_url   '/banner/get_all').then((response) => {
        this.bannerArray = response.data.data
        this.homeBannerPreview = this.bannerArray[0].banner_url
        this.contactUsBannerPreview = this.bannerArray[1].banner_url
        this.aboutBannerPreview = this.bannerArray[2].banner_url
        this.communityBannerPreview = this.bannerArray[3].banner_url
      }).catch((error) => {
        console.log(error)
      })
    },
    onFileChange (e) {
      this.file = e.target.files[0]
      this.bannerArray[0].banner_url = URL.createObjectURL(this.file)
    }
  }

Как мне заменить одну из отдельных ячеек изображения img-src в моей сетке, а затем отобразить ее после изменения?

Комментарии:

1. Похоже, это bannerArray атрибут данных, поэтому он должен быть отзывчивым. Итак, все, что вам нужно сделать, это обновить URL-адрес в вашем bannerArray, и страница должна повторно отобразить его для вас. this.bannerArray[index].banner_url = '/some/url/to/an/image.jpg'

2. я сделал это.bannerArray[0].banner_url = URL.createObjectURL(this.file), но никаких изменений файл введен, но изображение не изменилось, сэр @bassxzero

3. Опубликуйте свое определение компонента.

4. Вы передаете индекс обработчику событий и вызываете его e , поэтому e.target.files , вероятно, значение null. Попробуйте это @change="onFileChange($event, index)" вместо @change="onFileChange(index)"

5. не забудьте также написать правильный индекс в вашем bannerArray 😉

Ответ №1:

Вы передаете обработчику index события и вызываете его e , поэтому e.target.files , вероятно, значение null.

Измените это

 <input type="file" id="file-upload" accept="image/png, image/jpg ,image/jpeg" @change="onFileChange(index)"/>

Для этого

 <input type="file" id="file-upload" accept="image/png, image/jpg ,image/jpeg" @change="onFileChange($event, index)"/>

И это

 onFileChange (e) {
      this.file = e.target.files[0]
      this.bannerArray[0].banner_url = URL.createObjectURL(this.file)
    }

для этого

 onFileChange (e, i) {
      this.file = e.target.files[0]
      this.bannerArray[i].banner_url = URL.createObjectURL(this.file)
    }