im trying to make a set of images using v-for loop, but somehow it doesn't recognise variables inside the tag. pic is broken and alt just shows me {{ item.alt }} thing.
Here is my HTML:
<section class="our-technologies__section" v-for="(item, index) in tech_item" :key="index">
<div class="technologies__logo" #click="activeIndex = index" :class="{active: activeIndex === index}">
<img src="{{ item.src }}" alt="{{ item.alt }}">
<p>{{item.title}}</p>
</div>
</section>
And here are script:
export default {
name: "OurTechnologies",
data: function () {
return{
tech_item: [
{ title: 'Twilio', text: 'gfmds/lgkmlk/f', src: '../../images/twilio.png', alt: 'Twilio' },
{ title: 'Android', text: '12334356676', src: '../../images/android.png', alt: 'Android' },
],
activeIndex: 0,
}
},
}
I tried to use <img :src="item.src" :alt="item.alt"> and its still no results.
In vue cli you should use require to load the image :
<img :src="require(item.src)" :alt="item.alt"/>
<img :src="item.src" :alt="item.alt"> should work ™, but then I don't know enough about the environment you have set up. I quickly tried with a fresh project using vite and using the App component (so that it was root level), it didn't even need require for it to work. For this to work your images would be usually be in the ./src/assets/ directory, which they are not and I'm wondering if that's what is causing the problems, that the images are falling out of scope. You likely have a different setup, but I think you might able to use another option.
Place the images into the ./public/images/ folder. This will make them included as part of the bundle whether you're using dev/serve or build. Then reference them as /images/*.png without require or import. As long as you are serving the app at root level so that /images resolves correctly this should make it work. Otherwise it may need a bit of extra finessing to target the right directory.
Related
I'm using React JS and I'm having trouble accessing an image that comes from a state/variable. If I put the url inside the require in the html img it works but when it comes from outside it doesn't work at all. I wish someone would clarify this because it's been four days since I've been trying to find out. Important: This url I'm using comes from outside the React application
const [sideDishesImage, setSideDishesImage] = useState([
{
fileName: "",
id: "",
message: "",
sideId: "",
url: "file:/home/agemiro/backend-gerenciador/uploads/imagemteste.png"
}
]);
<img {require(`${sideDishesImage[0].url}`)} alt="image" />
You have two ways to reference an asset in a create-react-app app:
path to the asset, the asset has to be placed in the public folder, and you can reference it like:
const url = "/images/myImage.png" // myImage.png must be inside "public/images"
<img src={url} alt="alt" />
Load the asset through webpack:
import img from "path/to/the/asset.png" // This can be outside of public folder but must be inside the /src folder
<img src={img} alt="alt" />
I have the following bit of code which is my attempt at encoding the url:
<img src="{{ '/assets/images/animals/' + (data.animal.image | encodeURIComponent) }}" alt="" class="animal" />
I'm getting the error:
The pipe 'encodeURIComponent' could not be found
I'm assuming there is no such pipe, or I should be importing something somewhere.
What is the right way of doing this, preferably all in the template?
As requested, here is a sample of the data
data = { "animal" : { id: 1; image:"dog.png"; } }
You have a few different options:
This method uses CSS and sets the image as a background so it resize better.
<div [style.backgroundImage]="'url('+ image +')'" class="image"></div>
Use Angular sanitizer to make sure that the url does not contain dangerous script https://angular.io/api/platform-browser/DomSanitizer
Call a function to calculate the url, then it can run the encode you want.
<img [src]="getImageUrl(data.animal.image)" />
I have a drupal module called chess, in which I have different images to be displayed, javascripts to be included, and css to be linked.
I tried defining a chess/chess.libraries.yml that looks like this:
chess:
version: 1.x
css:
theme:
css/chess.css: {}
js:
js/jquery-ui.min.js: {}
js/jquery.ui-touch-punch.min.js: {}
js/jquery.simulate.js: {}
js/chess.js: {}
js/socket.io.js: {}
js/chess-socket.js: {}
js/chat.js: {}
dependencies:
- core/jquery
and included a line {{ attach_library('chess/chess') }} in chess/templates/index.html.twig. The images live in chess/images. Additionally, my ChessController's render array looks like this:
public function page(){
$content = readfile('modules/chess/templates/index.html.twig');
$element = array (
'#type' => 'markup',
'#markup' => $this->t($content),
'#attached' => array(
'library' => 'chess/chess'
),
);
return $element;
}
So it has the chess library attached. The only thing that shows up though is the html with broken images, no css, and an error message at the bottom of the page:
The website encountered an unexpected error. Please try again later.
InvalidArgumentException: $string ("7864") must be a string. in
Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line
133 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php).
As far as I can tell, none of the translation modules are even enabled. Anyone got an idea of what I'm missing?
Update:
I changed the page() function of my controller to read
public function page(){
$content = readfile('modules/chess/templates/page.html.twig');
$element = array (
'#type' => 'markup',
'#template' => $content,
'#attached' => array(
'library' => 'chess/chess'
),
);
return $element;
}
and the css shows up, but the images don't yet. The source also still shows the asset function, instead of the filled in script tag.
Update 2:
I installed symfony/asset via composer, and my twig file now looks like this:
<link href="{{ asset('css/chess.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/jquery-1.12.min.js') }}"></script>
...
<div class="piece black queen" id="black-queen"><img src="{{ asset('images/queen-black.png') }}" /></div>
The css shows up, but the content is displayed above the rest of the drupal page. Is there a way to put the page in its proper place within the drupal layout? (Also, the images aren't showing).
Update 3:
I removed all src="{{ asset(...) }}" tags from page.html.twig, and the javascript seems to work, as does the css. The only things left are how to get the page to work within the framework of the drupal page (instead of above it), and how to include images.
I think you should change it to just
{{ attach_library('chess/chess') }}
Rather than the absolute path to a CSS file.
so I have this node/express api that serve MySQL database, has json output like this:
[
{
id: 1,
name: "Laptop Lenovo",
serial: "123-456",
tag: "IT-CL-22052018-001",
image: "/public/images/lenovo.jpg"
},
{
id: 2,
name: "Desktop Dell",
serial: "456-123",
tag: "IT.CD.19052018-002",
image: "public/images/dell.jpg"
},
{
id: 3,
name: "Laptop Dell",
serial: "909090",
tag: "IT.CL.01052018.002",
image: "http://localhost:8000/images/ldell.jpg"
}
]
I tried this express functions each one of it:
app.use(express.static('public'))
app.use('/static', express.static('public'))
var dir = path.join(__dirname, 'public');
app.use(express.static(dir));
And the only way my React app can display the image is by using the full url on the database, like #3.
How I can display the image without using the full url?
Edit: Add Render Function
render() {
return this.state.inventory.map(itemList => {
let item = itemList;
return (
// <div className="tile">
<div className="card margin-all">
<div className="card-content">
<div className="media">
<div>
<figure className="image is-96x96">
<img src={item.image} />
</figure>
</div>
</div>
<div>
<h4>Nama: {item.name} </h4>
<h4>Nomor Seri: {item.serial} </h4>
<h4>ID Tag: {item.tag} </h4>
</div>
</div>
</div>
// </div>
);
})
}
}
Pict
For express middleware app.use(express.static('public')) is fine, problem is you need to use correct path. In you json data, image is public/images/dell.jpg which should be /public/images/dell.jpg but you can use
<img src={ '/' + item.image} />
as well, hope this will help
The route for static assets is /static/ so I assume you must call the images like this (e.g. #2)
app.use('/static', express.static('public'))
But you're requesting it via /public/
{
id: 2,
name: "Desktop Dell",
serial: "456-123",
tag: "IT.CD.19052018-002",
image: "static/images/dell.jpg"
}
So if you want the path from your origin JSON get working change it to
app.use('/public', express.static(__dirname + '/public'));
From express.js documentation:
http://expressjs.com/en/starter/static-files.html
However, the path that you provide to the express.static function is relative to the directory from where you launch your node process. If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve
So by adding a proxy to React app, I don't need to provide full url to the link.
If the express port is 8000, then put this line in the package.json of the React App, not the Node app.
"proxy": "http://localhost:8000"
Now I can use images/name.jpg and the image will be displayed.
I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found.
Folder structure:
app_folder/
app_component/
- my_componenet
- image_folder/
- myimage
I am using the image in mycomponent. If in mycomponent, I insert it directly with:
<img src="img/myimage.png"
This works fine, but I checked the html and it creates a hash. But my images have to be dynamically added to the html because they are part of a list. So, if I use:
<img src="{{imagePath}}">
which is basically img/myimage.png, it doesn't work. If I use:
<img [src]="imagePath">
It says NOT FOUND (htttps://localhost/img/myimage.png). Can you help me?
AngularJS
<img ng-src="{{imagePath}}">
Angular
<img [src]="imagePath">
Copy your images into the assets folder. Angular can only access static files like images and config files from assets folder.
Try like this: <img src="assets/img/myimage.png">
Create image folder under the assets folder
<img src="assets/images/logo_poster.png">
Angular 4 to 8
Either works
<img [src]="imageSrc" [alt]="imageAlt" />
<img src="{{imageSrc}}" alt="{{imageAlt}}" />
and the Component would be
export class sample Component implements OnInit {
imageSrc = 'assets/images/iphone.png'
imageAlt = 'iPhone'
Tree structure:
-> src
-> app
-> assets
-> images
'iphone.png'
in your component assign a variable like,
export class AppComponent {
netImage:any = "../assets/network.jpg";
title = 'app';
}
use this netImage in your src to get the image, as given below,
<figure class="figure">
<img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
#Annk you can make a variable in the __component.ts file
myImage : string = "http://example.com/path/image.png";
and inside the __.component.html file you can use one of those 3 methods :
1 .
<div> <img src="{{myImage}}"> </div>
2 .
<div> <img [src]="myImage"/> </div>
3 .
<div> <img bind-src="myImage"/> </div>
Well, the problem was that, somehow, the path was not recognized when was inserted in src by a variable. I had to create a variable like this:
path:any = require("../../img/myImage.png");
and then I can use it in src. Thanks everyone!
<img src="images/no-record-found.png" width="50%" height="50%"/>
Your images folder and your index.html should be in same directory(follow following dir structure).
it will even work after build
Directory Structure
-src
|-images
|-index.html
|-app
Angular can only access static files like images and config files from assets folder. Nice way to download string path of remote stored image and load it to template.
public concateInnerHTML(path: string): string {
if(path){
let front = "<img class='d-block' src='";
let back = "' alt='slide'>";
let result = front + path + back;
return result;
}
return null;
}
In a Component imlement DoCheck interface and past in it formula for database. Data base query is only a sample.
ngDoCheck(): void {
this.concatedPathName = this.concateInnerHTML(database.query('src'));
}
And in html tamplate <div [innerHtml]="concatedPathName"></div>
You have to mention the width for the image as default
<img width="300" src="assets/company_logo.png">
its working for me based on all other alternate way.
An important observation on how Angular 2, 2+ attribute bindings work.
The issue with [src]="imagePath" not working while the following do:
<img src="img/myimage.png">
<img src={{imagePath}}>
Is due your binding declaration, [src]="imagePath" is directly binded to Component's this.imagePath or if it's part of an ngFor loop, then *each.imagePath.
However, on the other two working options, you're either binding a string on HTML or allowing HTML to be binded to a variable that's yet to be defined.
HTML will not throw any error if you bind <img src=garbage*Th_i$.ngs>, however Angular will.
My recommendation is to use an inline-if in case the variable might not be defined, such as <img [src]="!!imagePath ? imagePath : 'urlString'">, which can be though of as node.src = imagePath ? imagePath : 'something'.
Avoid binding to possible missing variables or make good use of *ngIf in that element.
Check in your.angular-cli.json under app -> assets:[] if you have included assets folder.
Or perhaps something here: https://github.com/angular/angular-cli/issues/2231, can help.
You must use this code in angular to add the image path. if your images are under assets folder then.
<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>
if not under the assets folder then you can use this code.
<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes.
For example :
'my-image-name.png' should be 'myImageName.png'
'my image name.png' should be 'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img [alt]="My image name" src="./assets/img/myImageName.png'">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
Add in angular.json
"assets": [
"src/favicon.ico",
"src/assets"
],
And then use it like this: <img src={{imgPath}} alt="img"></div>
And in ts: storyPath = 'assets/images/myImg.png';
Try This:
<img class="img-responsive" src="assets/img/google-body-ads.png">
This was my problem, I added src/app/types/types.d.ts with content:
declare module '*.png' {
const value: any
export default value
}
declare module '*.jpg' {
const value: any
export default value
}
declare module '*.svg' {
const value: any
export default value
}