I have a Carousel with some pics. I can use URL link to show the pics but when I want to show pics that are stored in my computer instead of the URL it doesn't show the pictures. What's the way to add a picture to your Carousel from your own computer?
Here is the Code:
<template>
<div class="caro">
<v-carousel >
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
<div class="text-xs-center">
</div>
</v-carousel-item>
</v-carousel>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
id: 'rack', src: 'https://logisticpackaging.com/CrXBdba4vG7B2k/wPHm6Sft56fw2V/wp-content/uploads/2015/06/pcb-racking-system5.jpg', title:'Rack Section'
},
{
id: 'subrack', src: '../assets/Parts.jpg' , title: 'Subrack Section'
},
{
id: 'parts', src: '../Hasan.jpg' , title: 'Parts Section'
},
{
id: 'admin', src: 'https://d15shllkswkct0.cloudfront.net/wp-content/blogs.dir/1/files/2013/04/Transactional-Database.jpg' , title: 'Database Section'
}
]
}
}
In my example the "rack" and "admin" section do have pictures since they get it from internet. But "parts" and "subrack" don't have pictures since I'm trying to use my own computer's pictures.
Are you running with npm in dev mode or Build? I have a folder called public, i put all my images / svg etc in folders in this public folder, because webpack will build this folder with the vue code.
So as source i use src="img/brand/logo.svg"
Except when you dont use webpack and a vue build template, i wouldnt recommend placing images elsewhere than in the public folder. This folder is easy to copy and most likely will be copied by webpack, so you can upload everything in the dist folder.
the two photos you are trying to render in the carousel are coming from two different sources, there is nothing wrong with the code, double check the photo source and confirm that the photo extension in the code matches the photo extension in the source folder
Although the Vue loader automatically converts relative paths to required functions, this is not the case with custom components. You can fix this problem by using require.
If you change the items array format, the problem will be fixed:
<script>
export default {
data () {
return {
items: [
{
id: 'subrack', src: require('../assets/Parts.jpg') , title: 'Subrack Section'
},
{
id: 'parts', src:require( '../Hasan.jpg'), title: 'Parts Section'
},
]
}
}
Related
i trying auto import all images from folder. Under // tested is what i tried:
<template>
<p>classical art</p>
<img v-for="image in images" :key="image" :src="image.url" :alt="image.alt" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
images: [
{ url: require("../assets/images/classical-art/img-00001.jpg"), alt: "první" },
{ url: require("../assets/images/classical-art/img-00002.jpg"), alt: "druhý" },
],
};
},
};
// tested
const classicalArt = require(`../assets/images/classical-art/.jpg`)
classicalArt.forEach((image) => {
return image;
});
</script>
<style module lang="scss"></style>
Im not good in this things so i will need a help with this. Probably im just stupid, but i cant make it works. If possible, i want it async (lazy) or whatever it is.
----- UPDATE:
I tried something like that, but still nothing, but with require.context i should be able do this probably:
<template>
<p>classical art</p>
<img :src="getImgUrl()" v-bind:alt="req" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
};
},
methods: {
getImgUrl() {
var req = require.context(
"../assets/images/classical-art/",
false,
/\*.jpg$/
);
req.keys().forEach(function (key) {
req(key);
});
},
},
};
</script>
<style module lang="scss"></style>
I want when I add another image to the classical-art folder to create a new tag automatically and display the image without having to edit the code and manually register it
Can anyone help me with this?
For image rendering you must indicate the exact url to every image, so you have to type every url manually in the correct way.
BTW, your idea can be implemented with NodeJS. Node runtime has access to the file system, so url string can be created authomatically for every file.
Vue, unfortunately, has no real access to your files, it means every your component, file or image must be imported manually.
Im trying to make 6 blocks with different background images, i tried different options but none of them works,
This works:
<div :style="{ backgroundImage: `url(${require('../assets/images/img/img-1.jpg')})` }"></div>
These two doesnt work even if 'test' is literally the right path for the img:
<div :style="{ backgroundImage: `url(${require(test)})` }"></div>
<div class="col-4 jum-block" :style="{ backgroundImage: 'url(' + require(test) + ')' }"></div>
<script>
export default {
name: "Component",
data() {
return {
test: "../assets/images/img/img-1.jpg",
cardImgPath: "../assets/images/img/",
images: [
{ img: "img-1.jpg" },
{ img: "img-2.jpg" },
{ img: "img-3.jpg" },
{ img: "img-4.jpg" },
{ img: "img-5.jpg" },
{ img: "img-6.jpg" },
],
};
},
};
</script>
Given the usage of require(), I'm assuming your project is a Webpack-based project (scaffolded from Vue CLI).
The require() argument cannot be a fully dynamic expression for the same reason that import() calls cannot:
Dynamic expressions in import()
It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.
The import() must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an import() call is included. For example, import(`./locale/${language}.json`) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.
// imagine we had a method to get language from cookies or other storage
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
// do something with the translations
});
In your case, you could change your require() argument to include the image's path directory:
<div v-for="image in images"
:style="{ backgroundImage: `url(${require('../assets/images/img/' + image.img)})` }" ></div>
<script>
export default {
data() {
return {
images: [
{ img: "img-1.jpg" },
{ img: "img-2.jpg" },
{ img: "img-3.jpg" },
{ img: "img-4.jpg" },
{ img: "img-5.jpg" },
{ img: "img-6.jpg" },
],
};
},
};
</script>
I am using vue/nuxt and I have an image carousel that I want to populate..
In my assets folder, I have a folder called "AreaPictures" that contains the images I would like to insert into the carousel.
my v-for looks like this:
<div class="area__slider">
<div v-swiper="swiperOption">
<div class="swiper-wrapper">
<div v-for="image in images" :key="image" class="swiper-slide">
<img :src="`../assets/AreaPictures${image.imageURL}`" alt="" />
</div>
</div>
</div>
</div>
Here is my script section:
<script>
export default {
name: 'Area',
data: function () {
return {
videoLanguage: 'English',
englishSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
spanishSrc: 'https://www.youtube.com/embed/q0WkEkIMmQo',
currentSrc: 'https://www.youtube.com/embed/lRKmJqDbVsY',
swiperOption: {
grabCursor: true,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
},
},
//----- ARRAY TO STORE THE IMAGE PATHS
images: [],
}
},
//-----IMPORT THE IMAGES ON MOUNT
mounted() {
this.importImages(require.context('~/assets/AreaPictures/', true))
},
methods: {
changeSrc() {
if (this.videoLanguage === 'English') {
this.currentSrc = this.englishSrc
} else {
this.currentSrc = this.spanishSrc
}
},
//-----THIS IS WHERE I IMPORT THE IMAGES
importImages(r) {
r.keys().forEach((key) => {
var path = key.substring(1) //-----THE PATH FOR SOME REASON CONTAINS A . SO I REMOVE IT
this.images.push({
imageURL: path, //----- CREATE A NEW OBJECT AND ADD IT TO IMAGES
})
})
},
},
}
</script>
As you can see I am getting the file names and then in the src of each image I am using:
:src="`../assets/AreaPictures${image.imageURL}`"
The error I'm getting in the console is:
vue.runtime.esm.js?2b0e:6785 GET http://localhost:3000/assets/AreaPictures/area1.jpg 404 (Not Found)
So it seems I am getting the correct file name however the path is not correct. I have also tried using #/assets/AreaPictures/area1.jpg
however this also doesn't work.
I'm guessing this is not the right way to reference file paths dynamically, can anybody explain how to do it in this case?
Thanks in advance!
Vue.js dynamic images not working
Check this, it helped me out a lot. You have to wrap your image sources in require() so Webpack can load it.
I've set up a carousel using bootstrap-vue. The carousel-items are created dynamically using a for loop and an array. The array contains three objects with the following keys: id, caption, text and image path. So far, I am able to display the caption and text but not the images. I checked the console and there was no error. Hence, I am very confused. Below are my codes and screenshots of the problem
UPDATE: I am trying to fix this problem for 2 days already, help is greatly needed!
This is my project structure
This are my codes
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="10000"
controls
indicators
background="#ababab"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
>
<b-carousel-slide
v-for="item in carouselItems"
:key="item.id"
:caption="item.caption"
:text="item.text"
:style="{ 'background-image': 'url(' + item.image + ')' }"
></b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
data() {
return {
carouselItems: [
{
id: 1,
caption: "Memories",
image: "#/assets/images/Homepage-min.jpg",
text: "Memories(1)"
},
{
id: 2,
caption: "Memories",
image: "#/assets/images/Homepage-min.jpg",
text: "Memories(2)"
},
{
id: 3,
caption: "Memories",
image: "#/assets/images/Homepage-min.jpg",
text: "Memories(3)"
}
],
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>
Here is a screenshot:
Update I went to take a look at the networks tab to see if I specified the wrong image path. However, the image path was correct as the status code is 304. What seems to be the problem? Can anyone help?
Update: I've removed the style and replaced it with the following code
:img-src="item.image"
After I save the changes and refresh, I can see an icon indicating that the browser could not load the images.
Update I've successfully rendered the images to the carousel-slide. Apparently, "require" is needed if the image path is relative. I've updated this portion of my code to the following
data() {
return {
carouselItems: [
{
id: 1,
caption: "Memories",
image: require("#/assets/images/Homepage-min.jpg"),
text: "Memories(1)"
},
{
id: 2,
caption: "Memories",
image: require("#/assets/images/Homepage-min.jpg"),
text: "Memories(2)"
},
{
id: 3,
caption: "Memories",
image: require("#/assets/images/Homepage-min.jpg"),
text: "Memories(3)"
}
],
slide: 0,
sliding: null
};
},
Update However, now I face another problem, the image does not fit the entire height of the screen when in mobile mode. I want it to be responsive. Here is a screen shot of my problem
Update 7/5/2019 I am still trying to fix this issue, can anyone help me with the CSS?
Try using img-src="https://xxxxx" instead of changing the style. You should get something like that in your code:
<b-carousel-slide
v-for="item in carouselItems"
:key="item.id"
:caption="item.caption"
:text="item.text"
:img-src=item.image
></b-carousel-slide>
Or you can just use an actual img tag inside the <b-carousel-slide>:
<b-carousel-slide>
<img
slot="img"
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://xxxxxx"
alt="image slot"
>
</b-carousel-slide>
You should also check your pictures 'path' since webpack adds a unique-id automatically to each image and can sometimes be troublesome in certain cases, just check that the webpack config is working on your images.
<b-carousel> won't crop images, it tries to retain their native aspect ratio (the same as native Bootstrap V4.x carousel).
I'm getting started with nuxt. My static folder is in the screenshot. I've been trying to follow https://nuxtjs.org/guide/assets/#static
I've got a vuetify carousel component that was working fine with urls as the src. Now I want to try to serve local static files. I tried:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
export default {
data () {
return {
items: [
{
src: '/static/52lv.PNG'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
}
]
}
}
}
</script>
but now when I run the dev server I get a blank screen for that image of the carousel . The other images with urls work fine.
Inspecting the blank element in the browser, I see:
How can I display this image?
You don't need to specify the static folder, you should simply do:
src: '/52lv.PNG'
In addition to this question, if we would have it in '~assets/images/521v.PNG' ?
Instead of doing this
export default { data () {
return {
items: [
{
src: '/static/52lv.PNG'
},
Do this
src: `${require(`~assets/images/521v.PNG`)}`
and you would use it like this:
<img :src="items.src"/>