I have some images inside src/assets/ and in one of my component
i have this
<img
src="/src/assets/guna.jpg"
alt="Guna"
class="w-12 h-12 rounded-full"
/>
and also this :
<img
:src="`src/assets/${image}`"
alt=""
class="w-12 h-12 rounded-full"
/>
here i have bind image and passes image name in a loop and i have array of image in data which i loop in
Now when i run npm run build , only top one image that is guna.jpg is buld and get copied in dist/assets/.......jpg but not images which are bind
so how i solve it ?
you have to use require
<img
:src="require(`src/assets/${image}`)"
alt=""
class="w-12 h-12 rounded-full"
/>
Related
I am using tailwind (flowbite) css for web components that comes with respective css and js.
I want to implement acordion component (https://flowbite.com/docs/components/accordion/) and fill its data dynamically using Vue.
<li
v-for="({ username, email, role }, index) in myUsers"
:key="username"
>
<h2 v-bind:id="`accordion-open-heading-${{ index }}`">
<button
type="button"
class="flex items-center justify-between w-full p-2 font-medium text-left text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
v-bind:data-accordion-target="`#accordion-open-body-${index}`"
aria-expanded="true"
v-bind:aria-controls="`accordion-open-body-${index}`"
>
Seems that the vue part works fine, it grabs the data, creates respective HTML li - lists and changes its HTML tags for accordion access (accordion-open-body-1, accordion-open-heading-1 ..)
However, JS that cmes with flowbite can not grab that changes and throws the following error:
Please, advice how can I fix this issue.
Change
<h2 v-bind:id="`accordion-open-heading-${{ index }}`">
to
<h2 v-bind:id="`accordion-open-heading-${ index }`">
👆 👆
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 have I think a small issue but I can't resolve it since more than 2 hours ...
I have a VueJs application and I'm trying to display an image that came from an API.
In my register.html I have that code :
<img :src="'./assets/' +nation.drapeau"/>
When I check the browser I see the correct path './assets/images/drapeaux/AFC/Australie.png' but nothing is displayed !!!! Why ? My path is not ok ?
What I'm doing wrong ?
This is the structure of my VueJs folder
If you use dynamic src, you have to use require. It is handled by webpack and it knows to put it in dist after build.
<template>
<div>STATIC IMAGE</div>
<img src="./assets/logo.png" />
<div>DYNAMIC IMAGE</div>
<!-- <img :src="'./assets/logo.png'" /> IT DOESN'T WORK-->
<img :src="require('./assets/logo.png')" /> <!-- IT WORKS-->
</template>
Demo:
https://codesandbox.io/s/dazzling-leftpad-i3stg?file=/src/App.vue:0-281
Another source:
How to import and use image in a Vue single file component?
Try using require since it's a dynamic src
<img :src=require(`./assets/${nation.drapeau}`)/>
The response , thanks guys :
<img :src="require('#/assets/' +nation.drapeau)"/>
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)```
I am currently using the following library: https://www.npmjs.com/package/vue-owl-carousel.
It turns out that when using v-for in img inside the carousel, the carousel does not work, correctly.
This way it doesn't work:
<carousel
:autoplay="true"
:loop="true"
:center="true"
:nav="false"
:margin="5"
>
<img
v-for="item in detIncidente.fotos"
:key="item.fecha"
:src="item.path"
width="446"
height="446"
#click="showSingle(item.path)"
/>
</carousel>
This way if it works correctly for me:
<carousel
:autoplay="true"
:loop="true"
:center="true"
:nav="false"
:margin="5"
>
<img width="446" height="669" src="https://placeimg.com/200/200/any?3" />
<img width="446" height="669" src="https://placeimg.com/200/200/any?4" />
<img width="446" height="669" src="https://placeimg.com/200/200/any?2" />
<img width="446" height="669" src="https://placeimg.com/200/200/any?3" />
</carousel>
If you load the images dynamically, the carousel component doesn't wait until data is loaded.
You can try adding v-if
v-if="detIncidente && detIncidente.fotos && detIncidente.fotos.length"
Full code
<carousel
v-if="detIncidente && detIncidente.fotos && detIncidente.fotos.length"
:autoplay="true"
:loop="true"
:center="true"
:nav="false"
:margin="5"
>
<img
v-for="item in detIncidente.fotos"
:key="item.fecha"
:src="item.path"
width="446"
height="446"
#click="showSingle(item.path)"
/>
</carousel>