https://stackoverflow.com/questions/54596396/vue-js-nuxt-js-load-fallback-image-on-404
Based on the above article, we created a program called Image2 if image1 is an error.
However, it works well when src is in the img tag, but @error is not triggered when :src is bound.
I would appreciate it if you could let me know if there is a way to accomplish it.
<img
—src="image1"
@error="setFallbackImageUrl"
>
methods:{
setFallbackImageUrl(event){
event.target.src = 'image2'
}
}
When I tried it, the event certainly didn't run right after the page was displayed.
Bind the variable image_path to both image[src=] and input[type=text] and
Changing the input caused the event to fire.
<template>
<div class="container">
<div>
<input type="text,"v-model="image_path">
<img:src="image_path"@error="onError" alt="">
</div>
</div>
</template>
<script>
export default {
asyncData(){
US>return{
image_path:"/testx.jpg" // Image that does not exist
}
},
methods: {
onError(e){
console.log(e)
console.log(e.target)
e.target.src="https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
}
}
}
</script>
The event may not run immediately after the display.
By the way, the code below will ignite immediately after the page is displayed.
<template>
<div class="container">
<div>
<input type="text,"v-model="image_path">
<img:src="image_path"@error="onError" alt="">
</div>
</div>
</template>
<script>
export default {
data(){
US>return{
image_path:"
}
},
methods: {
onError(e){
console.log(e)
console.log(e.target)
e.target.src="https://sites.google.com/site/dekchysite95/_/rsrc/1480944463347/extra-credit/google.png"
}
}
}
</script>
How about leaving the data() function empty and setting the value with the creatd() function?
© 2024 OneMinuteCode. All rights reserved.