Develop Reference

I can't make a dynamic background image in vuejs, the url doesn't work

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>

V-For Image paths cannot find image. How can I add the correct file path when using v-for?

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.

Display pictures dynamically with v-for [duplicate]

This question already has answers here:
Vuejs image src dynamic load doesn't work
(2 answers)
Closed 2 years ago.
I'm trying to display a few JPG-pictures, that are in my src/assets/images folder by making use of the v-for-directive, but somehow the browser cannot find them. Weirdly enough, if I manually summon the pictures with identical coordinates, it works. Below you find the code to reproduce it. Screenshot of Page.
<template>
<div>
<h2>Success</h2>
<img src="#/assets/images/1.jpg" width="10%" />
<img src="#/assets/images/2.jpg" width="10%" />
<h2>Failure</h2>
<img
v-for="(image, i) in images"
:src="image.url"
:key="i"
#click="showProp(image.url, i)"
width="10%"
/>
</div>
</template>
<script>
export default {
methods: {
showProp: function (url, i) {
console.log(url, " and ", i);
},
},
data() {
return {
images: [
{ url: "#/assets/images/1.jpg" },
{ url: "#/assets/images/2.jpg" },
],
};
},
};
</script>
<style scoped>
h2 {
padding: 30px;
}
</style>
When I click on the broken pictures in the browser, first left picture then right picture, the console reads:
#/assets/images/1.jpg and 0
#/assets/images/2.jpg and 1
What did I try?
Try to find whether previous Stack Overflow posts [1,2] might be able to solve my problem
Different Path-Syntax (#/assets/ OR ../assets/)
Getting rid of aestethics
Forcing type match of image.url with String(image.url)
1: Vue.js image v-for bind
2: How to reference static assets within vue javascript
Remarks:
I should add that this component is inside a Vue-Router
Inspection of HTML-elements of the displayed page shows that manual IMG-entries were processed differently than dynamical entries. [3]
I'm on a Win10-machine with local Admin-rights
I realized that <img :src="path" /> AND data(){return{ path: "#/assets/images/2.jpg"}} also fails.
3: https://i.stack.imgur.com/xhpVc.png

I actually had the same problem a while ago, try to require:
images: [
{ url: require("#/assets/images/1.jpg")},
{ url: require("#/assets/images/2.jpg") },
],

Adding pictures to Carousel from your own computer in Vuetify

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'
},
]
}
}

Set image as object in ReactJS

I'm trying to set an image as object in ReactJS but i don't know the syntax , i looked on google but i didn't find anything! I don't know if it's even possible ?
Here's the code:
const items = [
{
src: '../images/hb1.jpg',
altText: 'slide 1',
caption: 'dfjkdfjksdfjk',
header:'something'
},
{
src: '../images/hb1.jpg',
altText: 'slide 1',
caption: ' asdasdasd',
header:'something'
},
{
src:'../images/hb1.jpg',
altText: 'Slide 3',
caption: 'dasjdasdkj',
header:'something'
}
];
i call it later on here:
<img src={item.src} alt={item.altText} />
I tried 'url('../url')' but didn't work!

Your image path should be relative to the project root images directory of the site.
For example:
Your domain is www.example.com. Your images are placed in your public folder /images.
Therefore in your app, you should link the image as follows:
<img src='/images/test.png' />