Develop Reference

Cannot display images in Vuejs

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).

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

What's the full syntax of CKEDITOR.addTemplates()?

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

Ember.js attempting to get a weird script

I'm very new to the whole concept of a web application framework, and I started out with ember.js last night. I've followed their video tutorial on getting started and I have this problem.
Ember.js is attempting to make a GET request to access some very weird file. Here is my files and the error. The code works perfectly apart from ember making a request and getting a forbidden 403 error (due to apache blocking it for having incorrect characters)
<!-- An extract of my index.html -->
<script type="text/x-handlebars" id="shots">
{{#each}}
<h4>{{title}}</h4>
<h6>Shot ID: {{id}}</h6>
<hr />
<p>Published on the {{pubDate}} by {{author.name}}</p>
<img src="{{image}}" alt="{{description}}" />
<p>{{description}}</p>
{{/each}}
</script>
And then this is my JavaScript:
// core.js
Master = Ember.Application.create();
Master.Router.map(function() {
this.resource('home');
this.resource('shots');
});
Master.ShotsRoute = Ember.Route.extend({
model: function() {
return shots;
}
});
var shots = [{
id: '1',
title: "It Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('26-11-2000'),
description: "A new shot, lol!"
}, {
id: '2',
title: "It also Works!",
author: { name: "Luke Shiels", user: "0001"},
image: "assets/img/0001.png",
pubDate: new Date('27-11-2000'),
description: "Another shot, lol!"
}];
I get the following 'errors':
http://i.imgur.com/fRLkaFQ.png (Sorry, don't have enough rep to post images)

Because of how Handlebars handles DOM updates you can't just add attributes inside of an HTML tag like you've done with the image.
<img src="{{image}}" alt="{{description}}" />
If you look at the generated HTML it will look something like:
<img src="<script id='metamorph-1-start'>someh</script>">
You need to look at the {{bindAttr}} helper instead.
<img {{bindAttr src="image" alt="description"}}/>

Angularjs - NgView not working

Here is the basic setup, which has a default noemployee.html partial: as the ng-view
Index.html content:
<div id="container" ng-controller="EmployeeCtrl">
<!-- Side Menu -->
<span id="smenuSpan">
<ul id="thumbList">
<li ng-repeat="employee in employees | filter:categories">
<img class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}">
</li>
</ul>
</span>
<!-- Content -->
<span id="contentSpan">
<div ng-view></div>
</span>
</div>
My Route Provider:
var EmployeeModule = angular.module('EmployeeModule', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/', { templateUrl: 'content/app/partials/noemployee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.when('Employee/:id', { templateUrl: 'content/app/partials/employee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
My Controller:
function EmployeeCtrl($scope, $http, $routeParams, $timeout) {
$scope.employees = [
{ "id": 1, "category": "ones", "image": "person1.jpg", "description": "person 1 description", name:"Jane Smith" },
{ "id": 2, "category": "twos", "image": "person2.jpg", "description": "person 2 description", name: "Mark Sharp" },
{ "id": 3, "category": "threes", "image": "person3.jpg", "description": "person 3 description", name: "Kenny Suave" },
{ "id": 4, "category": "fours", "image": "person4.jpg", "description": "person 4 description", name: "Betty Charmer" },
{ "id": 5, "category": "fives", "image": "person5.jpg", "description": "person 5 description", name: "John Boss" }
];
$scope.employeesCategories = [];
$scope.currentEmployee = {};
$scope.params = $routeParams;
$scope.handleEmployeesLoaded = function (data, status) {
//$scope.images = data;
// Set the current image to the first image in images
$scope.currentEmployee = _.first($scope.employees);
// Create a unique array based on the category property in the images objects
$scope.employeeCategories = _.uniq(_.pluck($scope.employees, 'category'));
}
$scope.fetch = function () {
$http.get($scope.url).success($scope.handleEmployeesLoaded);
};
$scope.setCurrentEmployee = function (employee) {
$scope.currentEmployee = employee;
};
// Defer fetch for 1 second to give everything an opportunity layout
$timeout($scope.fetch, 1000);
}
Observations:
At present, if I click on any employee, no 'Employee/??' is added to the address bar path [ which isn't a crime to me], however, the main content div does not change the partial to the employee.html.
If I comment out "$locationProvider.html5Mode(true);", the default localhost is now "http://localhost:31219/#/" and when I click on any employee the address bar shows 'http://localhost:31219/Employee/1', and the page is navigated away to a 404 error page.
I know I am bastardizing something here that the solution is so simple it escapes me.
Goals:
I really would like to avoid hash tags in my address bar.
It would be nice but no req that the employee/id not show up in the address bar but I suspect the partial cannot change w/o it. and, naturally
I want the partial to change to the 'employee.html" page when an employee is clicked.
Does anyone see where I am going wrong with this code?
Thanks in Advance!

Solution:
I needed to put '#/' in the img href --> href="#/Employee/{{employee.id}}"
Comment out
'$locationProvider.html5Mode(true);'
As a side note, I sure wish I knew how to get this to work w/o those pesky hash tags. Any ideas anyone?
In order to use html5mode, your server has to serve up the main app index file for otherwise invalid routes.
So, for example, if your server side code handles CRUD operations on paths like: /api/employees, /api/employees/:id, etc...
and it serves up static content, images, html, css, js, etc.
For any other request, that would otherwise be a 404, it should, instead of responding with a 404, respond with a 200 code, and serve up the index.html file.
This way any non static and non server side route gets handled by the angular app.
This is mentioned in the Angular guide on this page: http://docs.angularjs.org/guide/dev_guide.services.$location
Note the 'server side' comment at the end:
Html link rewriting
When you use HTML5 history API mode, you will need
different links in different browsers, but all you have to do is
specify regular URL links, such as: link
When a user clicks on this link:
In a legacy browser, the URL changes to /index.html#!/some?foo=bar
In a modern browser, the URL changes to /some?foo=bar In cases like the
following, links are not rewritten; instead, the browser will perform
a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Server side
Using this mode requires URL rewriting on server side, basically you have to rewrite
all your links to entry point of your application (e.g. index.html)

This was the problem:
<img class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}">
Solution:
I needed to put '#/' in the img href --> href="#/Employee/{{employee.id}}"
Comment out '$locationProvider.html5Mode(true);'
As a side note, I sure wish I knew how to get this to work w/o those pesky hash tags. Any ideas anyone?