I have a list with several elements (id, name, img_name ). In my asset folder I have a subfolder svgs (srs/assets/svgs). There are the SVGs (logo1.svg, logo2.svg). If I hard code the link it works very well: <img src="#/assets/svgs/brand1.svg" alt="">.
But when I build it dynamically (with a method) it doesn't work. I get a 404. The reason is that it does not interpret #/assets/. He thing it is a string and a part of the path. What i have to change that it works?
<template>
...
// inside a loop
<img :src="makeImgPath(item.img_name)" alt="">
...
</template>
...
methods() {
makeImgPath(imgName) {
return "#/assets/svgs/" + imgName + "svg";
}
}
...
Network says: 404 newapp/#/assets/svgs/brand1.svg
As you have correctly pointed out, vue does not interpret #/asstes. # also only stands for src/. For this reason, you can replace the # with src, then it should work.
makeImgPath(imgName = 'defaultImageName') { // suggestion
return "src/assets/svgs/" + imgName + "svg";
}
Related
Hello i am planning to bind my img src to a dynamic one so it will be editable as it will be coming from the AEM. Currently i am testing it on my local using image assets Line 1 is the static data and it is working but when it is coming from props or init data it is not working my init data is an object Line 2 it is not working i have found some on the internet but idk how to edit this because on the AEM the path will be different and not assets. I would to ask an assistance on how should the method be edited so it can work on local assets and aem
Init Data Below
"serviceRequestReconnectComponent": {
"reconnectActiveLogo": "../../../assets/images/Reconnect_linewhite2x.png",
"reconnectInactiveLogo": "../../../assets/images/Reconnect_line2x.png",
"reconnectImageText": "Reconnect Mobile Line",
}
Line 1 <img v-else src="../../../assets/images/Reconnect_linewhite2x.png" />
Line 2 (using props)
<img v-else :src="serviceRequestReconnectComponent.reconnectInactiveLogo" />
Vue.js dynamic images not working
` methods: {
resolve_img_url: function (path) {
let images = require.context('../assets/', false, /\.png$|\.jpg$/)
return images("./"+path)
}
}`
I am using a photo gallery component in my project. It requires a path to the folder containing the images. I am unable to find a way to do this. I have created an img directory inside of assets, and I'm using the standard Vue CLI 3 scaffolding. I'm able to use a require('path/to/file/name.png'), but what I need is to be able to bring the whole folder in. I'm unable to figure out a way to do this. I even tried placing the images in a folder inside of public, but no luck.
My structure looks like this:
project/public/img
project/src/assets/img/
project/src/components/
I need to get the project/src/assets/img path into a component inside of project/src/components/componentName.vue.
I should also mention that I want to be able to access this directory from the script tag, not the template tag.
You can try something like this:
const requireModule = require.context('../assets/img.',false,/\.png$/)
const images = {}
requireModule.keys().forEach(filename =>
{
const imageName = fileName.replace(/(\.\/|\.png)/g, '');
images[imageName] = requireModule(fileName)
OR
images[imageName] =
{
namespaced: true,
...requireModule(fileName)
}
});
export default images;
Then you can import this file
import photos from 'imagesObject.js'
for (let key in photos) // do whatever you want with the image
Thank you for your answer IVO. That solution did work, but I found another that I wanted to share here for anyone else having a similar problem. The issue I was having was incorrectly referencing the public folder using a relative path instead of BASE_URL. Based on this...
The public Folder Vue CLI Documentation
I created a directory inside of /public then referenced it using process.env.BASE_URL. This solved the problem. Here are the relevant snippets:
Javascript:
data () {
return {
thumbnailDir : process.env.BASE_URL + 'portfolio/'
}
Template:
<transition-group name="thumbnailfade" tag="div">
<img v-for="thumb in filteredImages"
:key="thumb.id"
#click="showLightbox(thumb.name)"
:src="thumbnailDir + thumb.name"
:alt="thumb.alt"
:title="thumb.alt"/>
</transition-group>
<lightbox id="mylightbox"
ref="lightbox"
:images="images"
:directory="thumbnailDir"
:filter="galleryFilter"
:timeoutDuration="5000"
/>
I am trying to dynamically generate images in my vue.js project by creating a basic method:
methods: {
changeLang(la
getImg(image, ext) {
return '~#/assets/images/' + image + '.' + ext;
},
...
Each component will have it's images generated dynamically:
data () {
return {
cat:'frenchcat',
...
The following line should identify the method, image and date and convert it into the image URL
<img v-bind:src="getImg(cat, 'svg')" v-bind:alt=cat>
But for some reason the source code simply returns:
<img data-v-61dd7a3d src="~#/assets/images/frenchcat.svg" alt="frenchcat"/>
Why is ~#/assets/ not being converted into an URL path?
You need to use require with v-bind:src:
getImg(image, ext) {
return require(`~#/assets/images/${image}.${ext}`);
}
Unsure if ~ before # is needed.
I am trying to return the path of different static assets (png) coming from an api (only as 'abcd.png') and then use for cycle to show every one of them in new span, which I'd v-bind style (the png which is returned from the api).
iconPath is the api data which holds pngs.
imgURL is the path to the png.
<div class="col-sm-3 px-3 py-4" v-bind:style="{ 'background-image': 'url(' + imgUrl + iconPath + ')' }"></div>
computed: {
imgUrl () {
return require('./src/assets/images/')
}
}
On first look, the path and the pngs are returned correctly in the console, but when I try to access them no image is found/open.
Thank you.
I think you need to just return the path of the file in imgUrl function, that is
imgUrl () {
return './src/assets/images/'
}
Since I see you are trying to construct the path of the 'background-image' using imgUrl and iconPath function return values. Since I cannot see what rest of code does, I assume this is what you are looking for.
I have an image with a dynamic (interpolated) src attribute.
<img src="./{{bar}}.jpg"/>
How do I get vue-loader to interpolate {{bar}}?
I'm pretty sure that your code throws a warning (not referred it):
[Vue warn]: src="./{{bar}}.jpg": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.
So, you should bind the value:
<img :src="'/assets/' + bar + '.jpg'">
The above example it loads an image xxx.jpg from the static directory assets, but not via loader yet.
To accomplish that, you should use a dynamic require:
<img :src="loadImage(name)">
methods: {
loadImage (imgName) {
return require('./assets/' + imgName + '.jpg')
}
}
NOTE
It is not recommended if the directory contains a large number of files, because the webpack will be load all the files which match your request (for the above example: ./assets/*.jpg).
In attribute interpolation is not allowed, use v-bind instead
https://v2.vuejs.org/v2/guide/syntax.html#Attributes