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' />
Related
I am a beginner. I was practicing and got stuck here. The path specified is correct, the name of the image on the product is right, still, it shows the error message. I am attaching the screenshots. Please let me know if anyone can help me with the issue.
ScreenshotScreenshoterrordisk
Folder structure
import product1 from '../../images/product-1.jpg';
import product2 from '../../images/product-2.jpg';
import product3 from '../../images/product-3.jpg';
export const productData = [
{
img: product1,
alt: 'Game',
name: 'Assassians Creed- Valhalla',
desc: 'Assassins Creed Valhalla is a 2020 action role-playing video game developed by Ubisoft Montreal and published by Ubisoft.',
price: '3,444',
button: 'Add to cart'
},
{
img: product2,
alt: 'Game',
name: 'Cyber Punk- 2077',
desc: 'Cyberpunk 2077 is an action role-playing video game developed and published by CD Projekt. ',
price: '2999',
button: 'Add to cart'
},
{
img: product3,
alt: 'Game',
name: 'Metro Exodus',
desc: 'Metro Exodus is a first-person shooter video game developed by 4A Games and published by Deep Silver.',
price: '2199',
button: 'Add to cart'
}
];````
Your code, data.js, is looking for files inside a directory "../../images", which does not exist in your folder structure. What does exist is "../../Images".
Capitalize your folder name in the import:
images > Images
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'
},
]
}
}
I wasn't able to find any documentation on this one.
Can I somehow create multiple sets of templates in my template plugin (f.e first you choose a template, then you choose color scheme for the chosen template)?
Right now in /templates/templates/default.js I have something lile^
CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[ /* list of my custom templates */ ]});
What does the first "default" mean?
It seems there's no documentation for the "addTemplates"-method for CKEditor 4, but there is for CKEditor 3. I'm not sure which version of CKEditor you're currently in?
Here's a snippet from the CKEditor 3 documentation:
// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
// The name of the subfolder that contains the preview images of the templates.
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
// Template definitions.
templates :
[
{
title: 'My Template 1',
image: 'template1.gif',
description: 'Description of My Template 1.',
html:
'<h2>Template 1</h2>' +
'<p><img src="/logo.png" style="float:left" />Type your text here.</p>'
},
{
title: 'My Template 2',
html:
'<h3>Template 2</h3>' +
'<p>Type your text here.</p>'
}
]
});
Full documentation:
https://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates
I apologize in advance if my post is formatting incorrectly as I am a newbie with all this or if this is a duplicate post and I am just not sue the correct search terms.
With HTML / CSS / Javascript, I am trying to:
display a list of my work using a script in my scripts.js file, populated by an array in my work.js file (I have this part working)
then, when a visitor to my site clicks on one of those images, the content opens in a bootstrap modal with content dynamically loaded from my works.js file.
I am guessing I need to add some further js to the // WORK SECTION script, but not sure how to incorporate the .click + the 'desc' field in a Bootstrap modal.
Currently my work.js file is a separate one that I am referencing. Also, not sure how to link the images here in this post as the text does display over the images. I have the site up at http://www.the-is.com, where the images show with the content from the work.js array, but it's not yet clickable in to the modal.
Thanks!
// WORK SECTION (in script.js file)
$(document).ready(function() {
for (var i = 0; i < works.length; ++i) {
$("#work").append("\
<div class='col-xs-12 col-sm-4 col-md-3 col-lg-2 project work-img'>\
<div class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='project-label'>Project:</p> " + works[i].title + "</span>\
</div>\
</div>\
");
};
});
// PROJECT ARRAY (work.js)
var works = [{
title: "Software package implementation",
pic: "img/pencils.jpg",
desc: "I led over"
}, {
title: "ProProfs documentation",
pic: "img/planning.jpg",
desc: "This project was for"
}, {
title: "JIRA Agile Systems Setup",
pic: "img/alphabet.jpg",
desc: "To help enhance"
}, {
title: "Streamlining new site templates",
pic: "img/writing.jpg",
desc: "Our team decided"
}, {
title: "Excel decision list tool",
pic: "img/lightbulb.jpg",
desc: "Using"
}, {
title: "Analysis, testing and implementation of new storefront",
pic: "img/rubics.jpg",
desc: "The time"
},
]