I am building a simple web app with Rust and I am trying to display an image to the website. But I can't add that image.
I am using Rust with a framework called Yew and with a tool Trunk.
I have successfully linked the .scss file to my website with Trunk. As they described in their documentation.
index.html
<!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">
<title>Yew Development</title>
<link data-trunk="" rel="scss" href="main.scss"> <!-- Successfull linked to this file -->
</head>
<body></body>
</html>
The .scss file does its work successfully.
But how can I display an image with Rust file with the html! macro?
main.rs
use yew::prelude::*;
fn main() {
yew::start_app::<App>();
}
#[function_component(App)]
fn app() -> Html {
html! {
<>
<h1> {"Hello world!"}</h1>
<link data-trunk="true" rel="copy-file" href="img/rust.png"/> // doesn't work
<img data-trunk="true" src="img/rust.png" alt="rust image"/> // doesn't work
<img src="img/rust.png" alt="rust image"/> // doesn't work
</>
}
}
Trunk's docs about how to add image.
But the doc wasn't helpful for me.
What you must do is instruct trunk to copy your static assets into the dist directory.
Let's suppose you have a directory called img with all the images, next to your src directory at the root of your project:
/home/me/code/my-yew-test
├──Cargo.lock
├──Cargo.toml
├──index.html
├──src
│ └──main.rs
└──img
└──rust.png
Add this line to your index.html header:
<link data-trunk rel="copy-dir" href="img">
This line won't be present in the production index.html file, it's only an instruction for trunk.
Now the files of the img directory will be served by trunk (and copied into the dist directory for production) so you can have this link in your html! macro:
<img src="img/rust.png" alt="rust image"/>
data-trunk attributes here would make no sense: trunk only reads and parses the index.html file, it doesn't see what's generated client side by the wasm code produced by the html! macro.
Your dist directory will look like this:
/home/me/code/my-yew-test
├──Cargo.lock
├──Cargo.toml
├──dist
│ ├──dysp-8a629f50b28a5e37.css
│ ├──index-8c2be3ebf3bd7075.js
│ ├──index-8c2be3ebf3bd7075_bg.wasm
│ ├──index.html
│ └──img
│ └──rust.png
├──index.html
├──src
│ └──main.rs
└──img
└──rust.png
All <link data-trunk ... /> elements must be in the static HTML files (such as index.html), not in the dynamically generated virtual DOM nodes via html!. This is because Trunk runs as a back-end process to determine what exactly is distributed as part of the main application, and this is a process which must be done in advance.
Attempting to add a link element afterwards would be an attempt to include an asset as part of the application after Trunk already did its job of copying and processing the expected assets, so it does not work. Instead, define all assets that you are going to need in your index.html, preferably in the head element, then you will be free to use them in your application by path (e.g. image/rust.png).
What you should do is make the path relative. Say this is your directory structure:
/home/me/code/my-yew-test
├── Cargo.lock
├── Cargo.toml
├── index.html
├── img
│ └── rust.png
├── README.md
└── src
└── main.rs
In the index.html file you should add a relative folder/file path to the resource you want compied. For copying the whole folder and using the image in main.rs:
<!--in index.html-->
<link data-trunk rel="copy-dir" href="./img"/>
// in main.rs
html!{
<img src="img/rust.png" alt="rust image"/>
}
Related
.(.git repository)
├── css
│ └── style.css
└── index.html
I'm in index.html, and type <link rel="stylesheet" href="/<C-x><C-f>.
Expected completion: css/, index.html.
But now: /Applications/, /bin/, /usr/, etc.
Is there a good .vimrc settings or plugins to solve this?`
On new install of Foundation 6 Zurb stack, installing building block sticky-shrinknav and injecting it into index.html template using {{> sticky-shrinknav}} shows the component on the page but scrolling the page does not produce the expected result.
Tried installing Zurb stack multiple times in different locations. Same results are produced.
This is the index.html template:
<!doctype html>
<html class="no-js" 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">
<title>Veridata</title>
<link rel="stylesheet" href="{{root}}assets/css/app.css">
</head>
<body>
{{> sticky-shrinknav}}
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
{{> body}}
<script src="{{root}}assets/js/app.js"></script>
</body>
</html>
My app.scss file contains:
#import 'components/building-blocks/sticky-shrinknav';
and my config.yml contains:
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/building-blocks/sticky-shrinknav.js"
- "src/assets/js/app.js"
Expecting the same as demonstrated on this page:
https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html
Instead, the nav bar is static (doesn't shrink or move) and some page components are above the navbar when scrolling, while others are beneath the navbar as i scroll.
My apologies if this is a noob question. I am new to Foundation.
EDIT: this is the app.js file contents:
import $ from 'jquery';
import 'what-input';
// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';
$(document).foundation();
You have to import the sticky-shrinknav component in your app.js (if you want to bundle it there). Otherwise you have to also include the generated bundle in your html file too.
But in general you need const $ = require('jquery') or import $ from 'jquery' as first line in the sticky-shrinknav file to load jQuery for it.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="/slim/app/views/animations/jquery.min.js"></script>
<script type="text/javascript" src="/slim/app/views/animations/bootstrap.min.js"></script>
<link rel="stylesheet" href="/slim/app/views/animations/bootstrap.min.css">
</head>
<body>
<div class="container">
hello
</div>
</body>
</html>
I have to specify full directory path for loading the js and css files
(jquery.min.js and bootstrp.min.js and bootstrap.min.css).Here i have
(/slim/app/views/animations/) as the directory which contain all the
files. if currently i am in the views directory i should use the
(animations/whatever the file name) but it is not working in these
way. but if i use the full directory path it all works fine. why these
is happening can anyone explain.
(slim) is my root directory where i installed slim
Using Relative paths is not how you typically work with Slim. Your assets (JavaScript/CSS/images, etc) should be referenced absolute from your views:
src="/assets/js/myapp.js"
Routed URLs do not map directly to file system based resources because templates should not be accessed by URL publically - they are only served by the controllers.
A common slim file structure looks like this:
app/
public/index.php
templates/
view.html
assets/
images/
js/
css/
Some add the assets subfolders directly into the public folder.
Others have those folders on the root level.
However, in general, public assets (e.g. CSS, JS, images) should be beneath the public document root (accessible to the public).
One thing that could be helpful if you do not like this behavior is to use Slim's basePath variable.
You should be able to set the base URL as a View variable in a slim.before callback in your index.php so that it is available to all routes like this:
$app->hook('slim.before', function () use ($app) {
$app->view()->appendData(array('baseUrl' => '/base/url/here'));
});
or
$app->hook('slim.before', function () use ($app) {
$posIndex = strpos( $_SERVER['PHP_SELF'], '/index.php');
$baseUrl = substr( $_SERVER['PHP_SELF'], 0, $posIndex);
$app->view()->appendData(array('baseUrl' => $baseUrl ));
});
And then apply it to the references in your HTML tag of the base template file and that's it.
<link rel="stylesheet" type="text/css" href="{{ base_url() }}/css/style.css" />
Or use Uri::getBaseUrl(), e.g.
$basePath = $request->getUri()->getBasePath();
I have the following organization to my project but am unable to access the related CSS and JavaScript files from within my HTML code, unless I create symbolic links from the file to my web root.
Is this normal behavior for Apache or does the problem lie elsewhere?
If I remove the symbolic links and correct the path in my src attributes the content of those outside files becomes inaccessible.
userName#hostName:/var/www/test$ tree
.
├── css
│ └── style.css
├── html
│ ├── code.js -> ../js/code.js
│ ├── index.html
│ ├── jquery-3.2.1.js -> ../libs/jquery-3.2.1.js
│ └── style.css -> ../css/style.css
├── js
│ └── code.js
└── libs
└── jquery-3.2.1.js
4 directories, 7 files
userName#hostName:/var/www/test$ less html/index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="./code.js"></script>
</html><!-- html -->
html/index.html (END)
^ Works
userName#hostName:/var/www/test$ tree
.
├── css
│ └── style.css
├── html
│ ├── index.html
├── js
│ └── code.js
└── libs
└── jquery-3.2.1.js
4 directories, 4 files
userName#hostName:/var/www/test$ less html/index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="../js/code.js"></script>
</html><!-- html -->
html/index.html (END)
^ Does NOT Work
userName#hostName:/var/www/test$ tree -p
.
├── [drwxrwxr-x] css
│ └── [-rw-rw-r--] style.css
├── [drwxrwxr-x] html
│ ├── [lrwxrwxrwx] code.js -> ../js/code.js
│ ├── [-rw-rw-r--] index.html
│ ├── [lrwxrwxrwx] jquery-3.2.1.js -> ../libs/jquery-3.2.1.js
│ └── [lrwxrwxrwx] style.css -> ../css/style.css
├── [drwxrwxr-x] js
│ └── [-rw-rw-r--] code.js
└── [drwxrwxr-x] libs
└── [-rw-rw-r--] jquery-3.2.1.js
4 directories, 7 files
^ Permissions on files
userName#hostName:/etc/apache2$ less sites-available/test.local.conf
<VirtualHost *:80>
ServerAdmin myEmail#email.com
DocumentRoot /var/www/test/html
ServerName test.local
ErrorLog ${APACHE_LOG_DIR}/test.local.error.log
CustomLog ${APACHE_LOG_DIR}/test.local.access.log combined
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
sites-available/test.local.conf (END)
^ Virtual Host Configuration
userName#hostName:/var/www/test$ uname -v
#35~16.04.1-Ubuntu
userName#hostName:/var/www/test$ apache2 -v
Server version: Apache/2.4.18 (Ubuntu)
^ System Info
Apache will not (by default) allow HTTP requests to access files outside (above) the root directory of the website for security reasons.
Your document root is set as: DocumentRoot /var/www/test/html, so all files (including non-HTML files) need to in this directory. Just because the directory is called html, don't be confused into thinking it should only contain HTML files.
Working directory structure
userName#hostName:/var/www/test/html$ tree
.
├── css
│ └── style.css
├── js
│ └── code.js
├── libs
│ └── jquery-3.2.1.js
└── index.html
3 directories, 4 files
userName#hostName:/var/www/test/html$ less index.html
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head><!-- head -->
<body>
<h1>LOCAL TESTING SITE..</h1>
</body><!-- body -->
<script src="js/code.js"></script>
</html><!-- html -->
index.html (END)
You'll see that all files are stored inside the /html directory or subdirectories of it. The HTML links to the JS and CSS files have been updated to refer to the correct file locations.
If Apache allowed files outside (above) the root directory to be accessed, you would run into major security issues.
For example, imagine if someone had a HTML file that did the following:
<!doctype HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
link to secret config file
</body>
</html>
This would allow users to gain access to any random file they wanted on the server.
When I was linking the Css file using the following tagline
<h:outputStylesheet library="css" name="style.css" target="body"/>
and I have the arranged directory structure as WebContent->resources->css->style.css
and I was getting result code on browser as <link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
But when I have changed the file name to styles.css, it worked but I didn't get the reason that what was the problem with style.css.
The problem is how you have set your resource files inside your project. Since this looks to be your actual folder structure:
resources
- css
- style.css
You have to call your CSS file like this:
<h:outputStylesheet name="css/style.css" />
More info:
What is the JSF resource library for and how should it be used?