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") },
],
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.
Coding noob here :)
I'm working on a project where I have prepared an array that I'm mapping over and printing. Inside the array I have another array, called "lang", that I can't reach from the map. I want to print each item in that array into an <li>, as the code is now all the items are printed as one <li> , which I don't want. I have tried maping inside the map in various ways but not gotten it to work.
Is the right way to do a map inside the map? In that case, how is it done?
Is there another way to do this?
Please see part of the array and the map function I have created down below. projectContainer, which I'm adding the innerHTML to, is a div inside the index.html file.
},
{
img: "./pictures/guess-who.png",
projectTitle: 'GUESS WHO?',
projectDescription: 'Recreation of the game "Guess who?" built with HTML, CSS and JavaScript.',
lang: [
'HTML', 'CSS', 'JavaScript'
],
url: '',
className: '',
id: 6
}
]
}
const printProjects = () => {
projectArray.projects.map((project) => {
projectContainer.innerHTML += `
<div class="project-container ${project.id}">
<img src=${project.img} alt="picture of guess who game"></img>
<h4>${project.projectTitle}</h4>
<p>${project.projectDescription}</p>
<ul>
<li>${project.lang} </li>
</ul
</div>
`
})
}
printProjects()
You can do something like this and use map(...).join('')
<ul>
${project.lang.map(el => `
<li>${el}</li>
`).join('')}
</ul>
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 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'
},
]
}
}
If I wanted to display a loading image and I was using JQuery to populate my data, I would do something like this:
HTML
<div id="loadthis"><img src="loading.gif"></div>
JS
$('#loadthis').html("Received Data");
However, with Polymer, my template looks like this:
<div id="loadthis">{{receiveddata}}</div>
and I have this property:
Polymer({
is: 'test-loading',
properties: {
receiveddata: {
type: String,
value: ''
}
}
});
I have tried simply putting html in the value for receiveddata but quickly discovered that won't work. I've also tried moustache syntax of {{#if}} etc, but that didn't work at all.
How can I display an image until the receiveddata property is populated?
Based on #a1626's comment mentioning dom-if I came up with this solution:
<div id="loadthis">
<template is="dom-if" if="{{isloading}}">
<img src="loading.gif">
</template>
<template is="dom-if" if="{{!isloading}}">
{{receiveddata}}
</template>
</div>
Then I added an isloading property in my Polymer definition.
Polymer({
is: 'test-loading',
properties: {
receiveddata: {
type: String,
value: ''
},
isloading: {
type: Boolean,
value: true
}
}
});
Now I just set it to false when the data has loaded.
self.isloading = false;
If you want to load local image dynamically, you should load it with full address.
For example, your loading.gif image is under folder /images/loading.gif or /views/loading/loading.gif. Though you can use it like <img src="loading.gif"> statically, once you want to use it dynamically, you should write this.receiveData = '<img src= "/images/loading.gif">'; or this.receiveData = '<img src= "/views/loading/loading.gif">';