question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to load images from src/assets/static/images ?

See original GitHub issue

I stored the images on src/assets/static/images as on template. But how to load it to app? Since there is no images on www folder.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:22

github_iconTop GitHub Comments

99reactions
centrualcommented, Feb 8, 2017

Hello @triasrahman

This problem mostly related with webpack. I can’t find any easy way to do it. You can do like:

modify main.vue file with:

<img :src="images.sample">

and

export default {
    data() {
        return {
            images: {
                sample: require('./assets/static/images/sample.jpg')
            }
        }
    }
}

or you can use css backgrounds.

50reactions
centrualcommented, Feb 25, 2020

Maybe it’s not, but I’m using the same as I wrote.

This template using vue.js, so you need to catch HTML elements inside vue. Also, if you looking image path in CSS, you can use url('../images/image-name.jpg')

I recommend you to work with vue.js before developing an application with this template… Because of the usage of vue different than HTML and jquery.

Have a great day!

Note: Bad English and deletion of the reply message made this message bad. It was not my intention to say that the other party did not know.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reference static assets within vue javascript
To get the images from JS code, use require('../assets.myImage.png') . The path must be relative (see below). So your code would be: var...
Read more >
How to load dynamic images in Vue and Nuxt with ease
Importing images from the assets folder when the path is static is not that difficult in both frameworks, Vue and Nuxt.js. But loading...
Read more >
Adding static images to a component, they do not appear
This is a code snippet my component <img :src="logo"> export default { name: 'NavbarComponent', data: function() { return { logo: './assets/img/test.jpg' } ...
Read more >
Images - React Native
Images. Static Image Resources​. React Native provides a unified way of managing images and other media assets in your Android and iOS apps....
Read more >
Images, fonts, and assets - Storybook - JS.ORG
In this case, you need to have all your images and media files with relative paths. Otherwise, the browser cannot locate those files....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found