im trying to display an image in vue component
<img :src="profile.photoes[0].picture"/>
(like this), but i m not getting it.
However, if i do
<img :src="'../../'+profile.photoes[0].picture"/> ( I m able to get the image.
why there are two behaviour of the same line of code. Does the folders in Laravel view, makes any difference ??
Related
I want to display an image in my VuePress markdown file. Normally, I'd go with:
However, I'd like to create a custom Vue component that will style the images in a specific way. Then, some images would be displayed using the "standard" markdown syntax (like above), and some others using my custom component.
With my custom component, I'd display the images like this:
<MyComponent src="./resources/myimg.png"/>
As you can see, the images are placed alongside my markdowns, in a resources directory. This makes sense for me, because the image is close to the markdown where it gets displayed.
Unfortunately, the image does not get displayed when I use MyComponent. VuePress (webpack?) handles the images during build and places them in some other directory with a different name. The "standard" Markdown image reference works fine, its URL to the image is set up correctly by VuePress. However, MyComponent does not work, because the src parameter is just a string for VuePress and it does not transform it in any way.
I know that one solution would be to place my images in the /vuepress/public folder. However, I would want to keep the same organization as I have now - images alongside documents.
How can I achieve that?
I had the same issue.
I used the answer #papey provides for a Vue question here
Here is one thing he suggests
<template>
<div id="app">
<img :src="require('./assets/logo.png')"/>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
I have a Vue component located at resources/js/modules/MyComponent.vue and inside it, I'm trying to use a local image as an src for the img tag, and the image is located at public/assets/myproj/image/myimage.png.
I've tried using the following :
<img src="#/assets/myproj/image/myimage.png"/>
<img src="require('assets/myproj/image/myimage.png')"/>
<img src="../../../public/assets/myproj/image/myimage.png"/>
<img src="/assets/myproj/image/myimage.png"/>
but none of them work...
I know this is a straightforward question but I hope someone can help me because I've been trying to find an answer for almost an hour now but I still can't figure it out.
If you want to use this in javascript you can do like this
<img :src='getImage(name)'/>
then you will need to import your image in your javascript code
getImage(name){
return require(`#/assets/myproj/${name}`);
}
I am working on a product page which has an Image gallery on the left and color selections on the right.
See the below image.
Now every time a color is selected a set of image has to be shown on the left. The way it is implemented right now is that every time the color selection is updated the store value for SelectedImages changes with the array of that particular color.
Now it makes sense that, whenever I switch to a new color the image is loaded. Which is happening.
But the issue I am facing is that whenever the color is changed, and the SelectedImages array is updated the images are loaded, no matter that they were loaded earlier. I don't want it to load again (send http) when it has already called the image once.
Also, I don't want to load all the images (4 color x 4 images = 16 Images) at once which would again be not performant.
I have created this UI using vue. It's not a vue single app, but it has vue component at some places where needed.
Code that renders Image.
<div class="desktop-gallery"
:class = "{ 'is_loading': isLoading }"
v-bind:style="parentStyle"
v-show="!onlyMobile">
<div class="gallery-item"
v-for="(image, index) in images" :key="index"
ref="variableGallery"
#click="handleGalleryZoom(index)"
>
<img :src="image"/>
</div>
</div>
For the <title> I've followed this SO answer This is working perfectly for part but the image is not working
Laravel dynamic page title in navbar-brand
But, Here when I try to make an image dynamic instead of title it's giving me a text instead of an image.
For instance,
header.blade.php
#yield('image')
In another blade, I called image as in section
#section('image', '<img src="http://localhost/appname/public/front/images/heading.png">')
Every page has a dynamic logo so I want to put logo dynamic the same like we're doing in the title.
But the result I'm getting is
<img src="http://localhost/appname/public/front/images/heading.png">
You can do like this
#section('image')
<img src="http://localhost/appname/public/front/images/heading.png">
#endsection
I'm using Webpack to compile my Vue production bundle and it loads my images properly because they are defined used <img> tags in my component. I want to load an additional image and show it based on a condition. Since the image isn't set initially in an <img> tag Webpack isn't loading it using file-loader. When I call:
event.currentTarget.children[2].innerHTML = "<img src='../assets/imgs/heart.png' />"
This doesn't work because heart.png was never processed by file-loader, while my previous images were. Any ideas on how to force Webpack to process this image without defining it in HTML my component. My other images (that work) look like this : <img src="data:image/png;base64,iVBORw0KGgo...=="> I understand why my image isn't loading (it's defined in a string), buy any suggestions?