Problem: Images are not showing in Lumen-vue project.
This question may seems a bit long. But I tried to make it visual easily.
In my lumen(8.3.4) server, I'm using a standalone vue frontend, and delivering the compiled css & js in public/frontend folder. Here is my folder structure
As you can see the vue app is inside the frontend folder my vue.config.js setting is as following:
const path = require("path");
const chunkPrefix = '[name]'
module.exports = {
filenameHashing: false,
outputDir: path.resolve(__dirname, "../public/frontend"),
chainWebpack: (config) => {
config.module
.rule('images')
.use('url-loader')
.tap(options => Object.assign({}, options, {name: `${chunkPrefix}.[ext]`}));
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
},
css: {
extract: {
filename: `css/${chunkPrefix}.css`,
chunkFilename: `css/${chunkPrefix}.css`,
},
},
configureWebpack: {
output: {
filename: `js/${chunkPrefix}.js`,
chunkFilename: `js/${chunkPrefix}.js`,
}
},
}
this delivering the compiled js & css after npm run build in public folder as per following
my app.blade.php is
<head>
<link rel="stylesheet" href="{{url('frontend/css/app.css')}}">
<link rel="stylesheet" href="{{url('frontend/css/chunk-vendors.css')}}">
</head>
<body>
<div>
<div id="app"></div>
</div>
<script type="text/javascript" src="{{url('frontend/js/chunk-vendors.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/app.js')}}"></script>
<script type="text/javascript" src="{{url('frontend/js/0.js')}}"></script>
</body>
Now the problem is after loading the page is browswer, some images are not loading
This is how the inspect showing in case of failed picture
<img src="/img/profile02.png" alt="profile picture" class="img">
and the working one is
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU==" alt="whatsapp icon"">
My vue asset handing is as following.
Can't figure out why some images are not loading.
Related
I'm trying to set up Vue3 so that I can use it via npm + webpack. For some reason the component does not get mounted and no error is shown. If I instead use unpkg it works. How can I make the npm + webpack option work?
I have "vue": "^3.1.5" in my package.json and the following webpack config:
module.exports = {
mode: 'production',
entry: {
provider: './src/components/provider.js',
requester: './src/components/requester.js',
},
optimization: {
minimize: false
},
output: {
path: `${__dirname}/../public`,
filename: '[name].js',
}
}
requester.js:
import { createApp } from 'vue'
createApp({
template: `
<div>
<div>
<h2>Números recibidos</h2>
{{ receivedNumbers }}
<ul>
<li v-for="n in receivedNumbers">{{ n }}</li>
</ul>
</div>
</div>
`,
data() {
return {
receivedNumbers: [1,2,3],
numberRequestIsOpen: false,
}
},
}).mount('#requester-component');
requester.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>requester</h1>
<div id="requester-component"></div>
<script src="requester.js"></script>
</body>
</html>
resulting html
<h1>requester</h1>
<div id="requester-component" data-v-app=""><!----></div>
<script src="requester.js"></script>
In the other hand, if I add <script src="https://unpkg.com/vue#next"></script> in the head tag of my html and change the js to:
Vue.createApp({
//
}).mount('#requester-component');
then the resulting html is
<h1>requester</h1>
<div id="requester-component" data-v-app=""><div><div><h2>Números recibidos</h2> [
1,
2,
3
] <ul><li>1</li><li>2</li><li>3</li></ul></div></div></div>
<script src="requester.js"></script>
which is the expected output.
Link to the repo in case it helps to play around. Last commit adds the unpkg has, and the previous one has the npm version
https://github.com/vuejs/vue-next/issues/4275
In order to use the functionality of the vue.js template, you need to load the finished package with the compiler and runtime, but vue.js by default loads the runtime only version, so you need to explicitly specify the version (vue.esm-bundler.js)
Adding
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm-bundler.js'
}
}
solved the issue.
I start with the simple vue.js application. I have icons in base64 format and put all them as object in separately file icons.js. I want to import this object to the file globals.js as globals constant and use this constant in all places where I need icons. BUT, this file does not need to be bundled.
I have files icons.js, globals.js, main.js, App.vue.
icons.js:
export const iconsData =
{
"large": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
},
"small": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",
}
};
globals.js:
import { iconsData } from './assets/icons'
export const icons = {
getIcon: function (iconNumber) {
if (!iconsData.large[iconNumber]) {
return "";
} else {
return iconsData.large[iconNumber];
}
},
isIcon:function (iconNumber) {
return iconsData.large[iconNumber];
}
};
In my App.vue :
<template>
<div id="app">
<div v-for="channel in channels">
<div class="icon" >
<img v-if="icons.isIcon(channel.number)" :src="icons.getIcon(channel.number)" >
<div v-if="!icons.isIcon(channel.number)" class="channel-name">{{channel.name}}</div>
</div>
</div>
</div>
</template>
<script>
import {icons} from "./globals"
export default {
name: 'app',
components: {
},
data() {
return {
icons: icons,
}
},
}
</script>
I tried
1) Vue.js exclude settings file from being bundled - not work for me
2)Exclude json file from being bundled in Vue from official documentation my file is in assets, but if I put absolutely path in global.js
import { iconsData } from '/assets/icons' - application not compiled.
Maybe this not right - import icons as const global? What I can do to leave file icons.js separately?
I suppose you're using webpack to build as you've tagged the question with VueCLI. If you don't want the icon data to be bundled, then you need to include such hints to webpack that the icon data should reside in a separate chunk than your app bundle. Something like this should work:
const iconsData = import('./assets/icons').then(icons => icons.iconsData);
You can also customize what the chunk should be named. Let's say you want it to be named icons-data, then you can do this:
const iconsData = import(/* webpackChunkName: "icons-data" */ './assets/icons').then(icons => icons.iconsData);
solved the problem this way:
1) Delete from icons.js word export
const iconsData =
{
"large": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAA3CAYAAAD6+O8NAAAAGXRFWHRTb2Z0d2FyZQB",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwE",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAUCAYAAAAJD/ojAAAAGXRFWHRTb2Z0d2FyZQB"
},
"small": {
"2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAARCAYAAABjEtTjAAAAGXRFWHRTb2Z0d2F",
"3": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAqCAYAAAAJWvOwAAAAGXRFWHRTb2Z0d2Fy",
"777": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAqCAYAAADMKGkhAAAAGXRFWHRTb2Z0d2",
}
};
2) Delete from globals.js import
export const icons = {
getIcon: function (iconNumber) {
if (!iconsData.large[iconNumber]) {
return "";
} else {
return iconsData.large[iconNumber];
}
},
isIcon:function (iconNumber) {
return iconsData.large[iconNumber];
}
};
3) Add to index.html referense to icons.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Icons</title>
<script type="text/javascript" src="<%= BASE_URL %>icons.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but egg doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4) Copy file icons.js to the public folder and to the src root
How I understand - this way exclude the file from webpack in "old school" way. How to do this with webpack - I do not understand.
One quick question regarding ol-Cesium. I'm trying to integrate ol-Cesium into my Vue - Openlayers app. But I'm getting this type of error:
"ReferenceError: Cesium is not defined"
Basically what I'm trying is to activate 3d functionality on click but I'm stuck with error above.
I literally used code provided in examples
import OLCesium from 'olcs/OLCesium.js';
const ol3d = new OLCesium({map: this.$store.getters.olMap});
ol3d.setEnabled(true);
I'm using OpenLayers v 5.3.0
Ok, I've figured it out. I only needed to add script tag inside an index.html file that points to Cesium build
Example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="Vue-OpenLayers" content="Author: Agrivi d.o.o.; Wraping OpenLayers inside Vue.js">
<link rel="icon" href="<%= BASE_URL %>agrivi.ico">
<title>Agrivi Maps</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<script src="https://cesiumjs.org/releases/1.53/Build/Cesium/Cesium.js" charset="UTF-8"></script>
</head>
<body>
<noscript>
<strong>We're sorry but web-app doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Hope it will help someone :)
The error is indicating it's a webpack error.
I'm referencing documentation found here: https://github.com/gberaudo/ol-cesium-webpack-example/blob/master/webpack.config.js
Make sure you've installed Cesium through NPM:
npm i --save-dev cesium olcs copy-webpack-plugin
Then, in your webpack.config.js file, add these lines:
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');
And in the configuration object of this file, add these lines:
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
// Needed to compile multiline strings in Cesium
sourcePrefix: ''
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: 'empty'
},
Then, add Cesium alias to this file:
resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource)
}
},
Then, add this to plugins in this file:
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
],
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
I am trying to use Quill editor with dojo framework, but its not working. The editor is not shown over there. Any help in this regard will be highly appreciated.
<html>
<head>
<link rel="stylesheet" href="http://cdn.quilljs.com/0.16.0/quill.snow.css" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/dojo/1.7.0/dojo/dojo.js"
data-dojo-config="async: true, packages: [
{ name: 'quill', location: 'http://cdn.quilljs.com/0.16.0/', main: 'quill' }
]" />
</head>
<body>
<div id="editor">
Editor in chief!
</div>
<script type="text/javascript">
define.amd.quill = true;
require(["quill"], function(quill){
var editor = new Quill("#editor");
});
</script>
</body>
I'm not familiar with Dojo 1.7, so opted for 1.10.4.
I also had XSS errors (something about an iframe) with Quill version 0.16, so went with the latest 1.2.6 version.
The below seems to work fine.
require(["dojo/ready", "Quill"], function(ready, Quill){
ready(function(){
var editor = new Quill("#editor", { theme: 'snow' })
})
})
<script>
var dojoConfig = {
async: true,
packages: [{ name: 'Quill', location: '//cdn.quilljs.com/1.2.6', main: 'quill' }]
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet" />
<div id="editor">Editor in chief!</div>