I took this example implementation of using React with Meteor and wanted to add something simple like adding a blaze login:
https://github.com/reactjs/react-meteor/tree/master/examples/leaderboard
Following this tutorial I added the Wrapper and placed it render of my app.jsx
https://www.meteor.com/tutorials/react/adding-user-accounts
render() {
return (
<div className="outer">
<AccountsUIWrapper />
<div className="login">Login</div>
<div className="logo"></div>
<h1 className="title">Title</h1>
<div className="subtitle">Subtitle</div>
<Dashboard tasks={this.data.tasks}
selectedTaskId={this.state.selectedTaskId}
onTaskSelected={this.selectTask} />
{this.getBottomBar()}
</div>
It compiles correctly with no errors but nothing shows up. Can someone help a newb out?!
Nevermind. Silly me forgot to add
blaze-html-templates to my packages.
**note I had to remove static-html because they conflicted.
Related
So I'm trying to build and deploy a Vue 3 website using Heroku. When I test the website locally using npm run dev it works just fine. However, when building I get the following error
Error:
Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
error during build:
Error: Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
at error (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:198:30)
at ModuleLoader.handleResolveId (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22508:24)
at C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22471:26
code:
Note: it's a fragment of the overall code, this is where the "issue" is. Also, I'm using Bulma to style
<section class="section">
<!-- to center columns, the parent has to be the image which is impossible -->
<div class="card">
<div class="card-image">
<figure class="image is-2by1 level">
<img src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
<div id="title-overlay-pad" class="is-overlay level-right">
<div id="title-overlay-background" class="has-text-centered">
<p id="title-home-page">delivAERO</p>
<p id="tagline-home-page">Revolutionizing the World's Delivery Infrastructure</p>
</div>
</div>
</figure>
</div>
</div>
</section>
Heiarchy:
UPDATE: ANOTHER SOLUTION
After getting a lot of help from Daniel, using the import method mentioned in their answer I was still getting errors. I assume this is more about the way the project is setup, but I found another solution.
The way, this post mentions is, it should be imported is as
import img from '#/assets/path/to/img.png'
Note: I have all my images in the assets folder on the src directory
However, this may give the following error:
error TS1232: An import declaration can only be used at the top level of a namespace or module.
From this post, the reason for this error is because imports should be declared first before any Javascript code.
In other words, it should look like:
<script setup lang="ts">
//any other imports here, before javascript code
import img from '#/assets/path/to/img.png'; // ASSETS
// Javascript code here
</script>
I'll still be accepting Daniel's answer as I believe that should be the solution for most.
Update
both require and import should work with default setup (used latest ATTOW vue-cli 5.0.6 and vue 3.2.13)
I've setup a new project with vue-cli and updated the helloWorld component with:
<template>
<div class="hello">
<img src="/images/logo.png">
<img :src="img"/>
<img :src="require('../assets/logo.png')">
</div>
</template>
<script setup>
import img from "../assets/logo.png"
</script>
All three versions work for me. If you are still having issues, I'd recommend the 1st option <img src="/images/logo.png">. The only thing you need to do is to move the image (logo.png) into the public folder (public/images/logo.png)
I've also noticed that with the default settings, the images that are "imported" or "required" get injected into the js as base64, which I'm not a fan of, so unless the configuration is updated to handle those, I'd recommend the first option.
AS an aside, I would also recommend removing spaces from the resource and directory names. You have a space in Design Pics, which servers should all handle properly, but it's not guaranteed .
When you use the image like this in the template, it is handled as a string
<img :src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
In order for Vue to bundle the asset it needs to know about it.
you can do this reference in-template
You can import it and then pass the reference the image as the variable in the template
<template>
<div>
<img :src="myImg" alt="Drone Image" width="1280" height="720">
</div>
</template>
<script setup>
import myImg from './assets/Design Pics/Drone/7_0030.png'; // import asset
</script>
or use require in the template:
<template>
<div>
<img :src="require(./assets/Design Pics/Drone/7_0030.png)" alt="Drone Image" width="1280" height="720">
</div>
</template>
I have an app built using React with Parcel. I am attempting code splitting via modules, but have a strange issue.
On my home page, I am importing a module that has its own css. When the component is showing on the page, there is one single css rule that is showing as 'undefined' in the inspector.
When I run this in my local, or on another page in my app such as About, the rule is recognized and everything works perfectly.
I've tried everything I can think of, but I am lost as to what to try next.
Here's the code in my js file:
<div className={styles.content__move + " content__move"}>
<div className={styles.columns + " columns"}>
<div className={styles.column + " column"}>
The rule being ignored is 'styles.columns'. As you can see it is in between styles.content__move and styles.column, and BOTH of those are working as expected.
When inspecting I see this:
<div class="_content__move_31d79 content__move">
<div class="undefined columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
But if I add the module on another page, it shows correctly as:
<div class="_content__move_31d79 content__move">
<div class="_columns_31d79 columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
What might I be missing?
I'm not sure what the problem was, but I renamed the class in the JS and CSS, rebuilt, and it started working right away. I would suggest to try this before changing style loaders for anybody that has the same problem.
I added:
class="styles.columns_f"
in the JS, and in the SCSS:
.columns_f {...}
Ran a production build, and that was the fix.
I'm using styled-jss in my app. During development it compiles my components to ugly classnames and I see this in my Web Inspector
<div class="div-2-0-1-1">
<div class="div-3-0-1-2">
<div class="div-4-0-1-4">
<div class="div-5-0-1-5"></div>
<div class="div-6-0-1-6"><textarea class="textarea-7-0-1-7"></textarea></div>
<div class="">
<div class=""><input class="input-8-0-1-8"><input class="input-9-0-1-9"></div>
</div>
</div>
</div>
</div>
I'd rather want to see component names in my classnames. I've set mode: 'development' in my webpack.config.js but this didn't help. Is there something I can do about it?
Automated way to do that would require to build a babel plugin that would take the variable/identifier name and pass it to the styled function and later use it as part of the className. This doesn't exist yet and we are working on a new version here if you want to follow https://github.com/cssinjs/jss/pull/1094
I am trying to use polymer project in a website but I am stuck and cannot find help on the documentation.
How do I use the click of a paper-fab element? I have seen on another stackoverflow post the use of the property on-tap= . I have seen the docs and the code and could not find any place that says this property exists.
Should I add a event handler? Is this how polymer works?
My code:
<!-- `keepCondensedHeader` makes the condensed header to not scroll away -->
<core-scroll-header-panel condenses keepCondensedHeader condensedHeaderHeight="80">
<core-toolbar>
<div flex></div>
<core-icon-button icon="thumb-up"></core-icon-button>
<paper-fab icon="account-circle" ></paper-fab>
<div class="bottom indent bottom-text" self-end>
<div>ME AVISE</div>
<div class="subtitle">Fique informado e economize</div>
</div>
</core-toolbar>
<div class="content">
<lorem-ipsum paragraphs="100"></lorem-ipsum>
</div>
</core-scroll-header-panel>
If your posted code is inside another Polymer element you can add on-tap={{yourHandlerMethod}} to the paper-fab element. If you're outside Polymer, then yes, you can just el.addEventListener('tap', function() { ... }).
See here for the available events.
I'm using ExtJS 4.1 and it's a lot faster but yet sometimes loading a view may take a while so I want to show some kind of Loading image which will tell the user that he should wait. I suspect that it's something pretty standard but yet some advices on how and where to do it would be very helpful.
Thanks
Leron
Search for LoadMask in their documentation. It is pretty standard thing.
i did like this:
into index.html
<div id="page-loader">
<img style="display: block;margin-left: auto;margin-right: auto; width=50%; height=100%;" src="data/xxxxx.gif" />
<br/>
Initializing...
<br/>
</div>
into app.js
launch: function() {
Ext.create('Pwallet.view.Videata');
if (Ext.get('page-loader')) {
Ext.get('page-loader').remove();}
}