I try to load different pictures dynamically. But it won't work yet.
In template i have my img tag with the dynamic source-path:
<template>
<div id="test">
<img src="require('../../assets/containermoduls/${pname}.png')" />
</div>
</template>
here my data function:
<script>
export default {
data () {
return {
pname: '2x5'
}
}
}
</script>
This is my folder structure:
-src
--assets
---containermoduls
----2x4.png
--components
---p3component
----Page3Left.vue (where my code is from)
Does anybody know what I'm doing wrong? I don't get any error messages on my console. Instead of a picture I see someting like an picture icon.
You should use binding :src instead of src
<img :src="require('../../assets/containermoduls/${pname}.png')" />
Related
I have a Vuejs component containing an img tag. I can render the image with no problem if I hardcode the src like this.
<template>
<div>
<!-- <img class="rotate logo" alt="Vue logo" src="#/assets/abstractwave.png"/> -->
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
I cannot render the image if I insert bind the src as a prop. As follows... Why is this? What must I change in order to render the image using a prop?
<template>
<div>
<img class = "rotate" alt="Vue logo" :src="`#/assets/${filename}`" />
</div>
</template>
<script>
export default {
name: "RotatingImage",
props: {
filename: String
},
}
</script>
Upon inspection in the browser, I see that the src path is correct, yet the image does not show.
You can make computed property:
computed: {
getImgUrl() {
return require(`#/assets/${this.filename}`);
}
}
Then in template bind it:
<img class = "rotate" alt="Vue logo" :src="getImgUrl" />
I would like to return an image as a widget.
I put my photo.png in a folder images next to myFile.jsx.
I have always the same error :
Can't walk dependency graph: Cannot find module './images/photo.png' form /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx required by /Users/macbookpro/Library/Application Support/Übersicht/widgets/my file/myFile.jsx
I have also tried to: move the photo to my Desktop, use require, use import .. from ...
Here there is the code:
import { css } from "uebersicht";
// import photo from "./images/photo.jpg";
// import photo from "./Users/macbookpro/Desktop/photo.png";
export const render = () => {
return (
<div>
<img src="./images/photo.png" />
{/* <img src="./Users/macbookpro/Desktop/photo.png" /> */}
{/* <img src={require("./images/photo.png")} /> */}
{/* <img src={require("./Users/macbookpro/Desktop/photo.png")} /> */}
</div>
);
};
Since myFile.jsx is actually act as a component for uebersicht you have to include your widget folder name in you src.
For example if your photo.png is in example.widget/images folder, your should be:
<img src="example.widget/images/photo.png/>
when i open the project in https mode, cant retrieve the images(receive 404 ).
Can someone help me?
Code:
<template>
<div>
<img src="/assets/photos/test.png"/>
</div>
</template>
<script>
export default {
name: "home"
}
</script>
v-bind src and require your photos
<img :src="require('/assets/photos/test.png')"
I'm creating a simple web app that takes a JSON file which holds an url of 6 images stored inside my folder.
Here is the file: https://api.myjson.com/bins/t3ri9 and I want it using vue js's vue-bind:src to attach each url of each image so that they may be displayed on the browser. Here is the code:
<template>
<div id="main">
<br/><br/>
<h2>Here is a list of all your image</h2>
<br><br>
<div id="images">
<div class="image" v-for="image in pod">
<img v-bind:src="image.url"/>
</div>
</div>
</div>
</template>
<script>
export default {
name: "wall",
data() {
pod: []
},
created() {
this.$http.get('https://api.myjson.com/bins/t3ri9').then(function (data) {
this.pod=data.body;
console.log(this.pod);
});
}
}
</script>
<style scoped>
</style>
However when I run the project on a localhost it doesn't display the images even though when I do to the console it correctly passed the image's url.
this inside the callback is not the same this as outside (in created() {).
Use fat-arrow function to preserve this from the outside:
this.$http.get('https://api.myjson.com/bins/t3ri9').then((data) => {
this.pod=data.body;
console.log(this.pod);
});
Try this
v-bind:src="require('image.url')"
I'm guessing your local images aren't added by webpack?
Maybe try and use the remote location of the image instead.
http://...
I am currently learning and practicing React.
I am trying to achieve a react web app that allows you to display and scroll through Nasa's picture of the day based on what date you choose. here's the api: api.nasa.gov/
the project is simple BUT. sometimes the url that the api returns, leads to an img and sometimes a youtube video. for example:
https://apod.nasa.gov/apod/image/1708/PerseidsTurkey_Tezel_960.jpg
or
https://www.youtube.com/embed/Zy9jIikX62o?rel=0
I have managed to display both cases using an iframe. I know this is not ideal for the imgs because I cannot format it properly with css and it just looks bad with the scroll bars, sizing etc..but won't display the video..
this is what the react component looks like (using bootstrap)
detail.js
import React, { Component } from 'react';
export default class Detail extends Component {
render() {
return (
<div className="video-detail col-md-12">
<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
</div>
</div>
);
}
}
I would like to images also to display responsively, centered and original aspect ratio but also still have the videos display properly as they are.
I have tried putting an additional <img> underneath the <iframe> but that just renders the image twice. Is there a way to render an <img> or <iframe> conditionally?
I am wondering what strategy should I try next? Any ideas?
Thanks!
you should use conditional rendering
const isImage = this.props.url.split().pop() === 'jpg';
return (
{
isImage ? <img src={this.props.url} />
: <iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
}
)
or
const isImage = this.props.url.split().pop() === 'jpg';
return (
{
isImage && <img src={this.props.url} />
}
{
!isImage && <iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
}
)
Yon don't even have to use a split().pop(). Just scan the API return for a media type (much simpler, really):
const Photo = props => (
<div>
<h3 className="m-5 text-center">{props.photo.title}</h3>
{props.photo.media_type === "image" ? (
<img className="rounded mx-auto d-block" src={props.photo.url} alt={props.photo.title} />
) : (
<iframe
title="space-video"
src={props.photo.url}
frameBorder="0"
gesture="media"
allow="encrypted-media"
allowFullScreen
className="mx-auto d-block"
/>
)}
<p className="col-md-8 offset-md-2 mt-5 pb-5">{props.photo.explanation}</p>
</div>