Upload works nicely but I am getting this annoying warning. What is causing this problem?
I am using like this
<el-upload
class="avatar-uploader"
ref="upload"
action="/app/admin/product-image"
:with-credentials="true"
:thumbnail-mode="true"
:file-list="fileList"
:on-success="handleAvatarSuccess"
:on-change="picPreview"
:on-error="uploadError"
:auto-upload="true"
:data="{product_id:data.id}"
:multiple="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
list-type="picture-card"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
Try:
<el-form ref="form" label-width="120px">
<!-- form content here --->
</el-form>
Worked form me.
Related
I am trying to add an image to the carouselItem of MudBlazor. Its not working correctly taking wrong width and height as well.
My code:
</MudCarouselItem>
<MudCarouselItem Transition="transition" Color="#Color.Secondary">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="#Icons.Custom.Brands.MudBlazor" Size="#Size.Large" />
</div>
</MudCarouselItem>
<MudCarouselItem Transition="transition">
<div class="d-flex" style="height:100%">
<MudIcon Class="mx-auto my-auto" Icon="#Icons.Custom.Brands.MudBlazor" Color="#Color.Primary" Size="#Size.Large" />
</div>
</MudCarouselItem>
Ok!, you should put your html or component inside, like this:
<MudCarousel Style="height:500px; width:100%" ShowArrows="true" ShowDelimiters="true" AutoCycle="true" TData="object">
<MudCarouselItem Transition="Transition.Fade" Color="#Color.Transparent">
<a href="#imageUrl.secure_url" target="_blank">
<img src="#your_image_url" width="500" height="500" alt="Italian Trulli">
</a>
</MudCarouselItem>
</MudCarousel>
I didn't understand exactly your problem, but tried this sample and it appears to be working:
https://try.mudblazor.com/snippet/GkQQuFvQaKGUBHwy
I'm getting some data from an API that contains an image and some other information. Now there's a problem in Nuxt js or maybe I'm wrong. Whenever I supply the path to the image in the :src it just doesn't work.
Here's my code:
<div v-for="(project, index) in projects" :key="project.p_id" class="swiper-slide">
<div :id="`index_${index}`" class="slide_wrapper">
<div class="background">
<img :src="getImgUrl(project.p_img_path)" alt="project cover image" />
</div>
<div class="details">
<div>
<div class="left">
<h2 style="color: black !impor tant">{{ project.p_label }}</h2>
<small>{{ project.p_date }}</small>
</div>
<div class="right">
<nuxt-link class="btn btn-secondary" to="/" #click="readMore">
<i class="fas fa-ellipsis-h"></i>
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
script:
props: ['projects'],
methods: {
readMore() {},
getImgUrl(path) {
return '../../../' + path
},
},
Last thing, whenever I use required required('./assets/'+image.jpg') nuxt.js crushes in compilation always stops at 69%. I also tried required.context but it didn't work as well.
Any help will be appreciated. Thanks in advance.
In your template, change:
<img :src="getImgUrl(project.p_img_path)" alt="project cover image">
To:
<img :src="require(`../assets/${project.p_img_path}`)" alt="project cover image">
You shouldn’t need a method to return the path as a string, just use a template literal as above.
Ps. This assumes project.p_img_path = img/project_img/filename.jpg, so adjust as necessary.
The solution is that I had to put all the images inside the assets folder directly. Thank you all for your time.
I'm trying to load dynamic images here. My api provides me only with the filename. I combine it with the path (which is the public path of nodejs), then I require it from vuejs to show the image.
It all works fine in the development but when it comes to production build it fails and says "Cannot find the module".
I've spent tons of hours to this and still cannot find an answer.
Edit - I noticed after the production build earlier images I saved from development mode is also displayed in production build.but If I try save a new image from a production build it wouldnt work.My URL is somehow converted to point the public/img folder in vue from development mode.
in HTML
<div class="section-1" v-for="(cardinfo,index) in cardinfos" style="cursor:pointer" :key="index" #mouseover="moment(cardinfo)">
<div class="img-wrap" >
<a #click="deleteAd(cardinfo)">
<mdb-icon v-if="data.myads" icon="trash-alt" class="close red-text" size="lg" />
</a>
<img class="img-fluid ad-image" :src="getImgUrl(cardinfo.images[0])" alt="ad" v-on:click="navigateToAd(cardinfo)" />
</div>
<div class="wrapper" v-on:click="navigateToAd(cardinfo)">
<mdb-card-title>{{cardinfo.subject}}</mdb-card-title>
<hr class="mb-3" />
<div class="venue">
<strong>Venue:</strong>
<p>{{cardinfo.venue}}</p>
</div>
<div class="contact">
<strong>Contact:</strong>
<p>{{cardinfo.contact}}</p>
</div>
<div class="Conducted-By" >
<p title="Click to visit">{{cardinfo.lecturer}}</p>
</div>
</div>
<div class="info-footer">
<div class="info">
<div class="name">{{time}}</div>
</div>
</div>
</div>
in Script
getImgUrl(pic) {
return require("../../../tuition/public/images/" + pic);
}
Error
vue.runtime.esm.js:1888 Error: Cannot find module './marques-brownlee-wallpaper.jpg-1588649676704.png'
at n (.*$:142)
at s (.*$:137)
at o.getImgUrl (Card.vue:107)
at Card.vue?852f:1
at o.jt [as _l] (vue.runtime.esm.js:2630)
at o.B (Card.vue?852f:1)
at o.e._render (vue.runtime.esm.js:3548)
at o.a (vue.runtime.esm.js:4066)
at na.get (vue.runtime.esm.js:4479)
at na.run (vue.runtime.esm.js:4554)```
Vue-Owl-Carousel workign fine using the basic model :
<carousel>
<img src="https://placeimg.com/200/200/any?1">
<img src="https://placeimg.com/200/200/any?2">
<img src="https://placeimg.com/200/200/any?3">
<img src="https://placeimg.com/200/200/any?4">
</carousel>
But when i use a loop on , the Carousel broke and shows all slides in column.
<carousel> // Not Working
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
<carousel> // Not Working
<template v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>
<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>
Thank you if you can help.
You can try:
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
Are you using axios to get data to the slides array from the database?. If so the template of vue is being rendered before the data is received in the array causing the carousel not to work. you can re render the vue component and it will work. I had same problem and re-rendering the vue solved it.
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
code worked for me :)
I had the same problem, just check if your slides data is true
try this code :
<carousel v-if="slides">
<img v-for="slide in slides" :src="slide.png">
</carousel>
I am currently working on a slider, using touchSlider, and it mouseTouch option won't work for me.
Slider itself works fine, but not the mouseTouch option.
What am I doing wrong?
Here is my js:
$(document).ready(function() {
$(".touchslider").touchSlider({ mouseTouch: true });
});
and html:
<div class="touchslider">
<div class="touchslider-viewport" style="width:500px; height: 375px;overflow:hidden; border: 1px solid #f00;"><div>
<div class="touchslider-item"><img src="img/3540115854_5d302001da.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3542680555_ea43d85e0a.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3540231388_f8ec22b549.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3546828250_6f91b64ba7.jpg" width="500" height="354" /></div>
</div></div>
<div>
<span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
<span class="touchslider-nav-item">3</span>
<span class="touchslider-nav-item">4</span>
<span class="touchslider-next">→</span>
</div>
</div>
Got the same problem when accessing the .html via my local file system using the file-protocol
file://pathtothehtml/touchslidertest.html
The problem does not occur when I accessing the .html using http
http://hostnametothehtml/touchslidertest.html
I used chrome,firefox and safari on MacOS - using http solved the problem on all of them.
cause analysis
The browser handle the results gathered using the file-protocol different to results gathered via the http.
Careful: the following is only guessing, since I had not found anything about how any of the common browser handles the file-protocol.
Maybe the browser supports drag&drop for the file-protocol. This support may override the event handling of the page interpreter in the browser - such that the drag event on the image does never reach the DOM-event handling routine for the page.