<div> <img src="./img/no_photo.jpg> <!-- это работает --> <img :src="path"> <!-- это нет --> </div>

...

 data() { return { path: './img/no_photo.jpg' } }

I use vue-cli> webpack

If you look at the code in the browser, the path of the first image converts to src="/static/img/no_photo.4836f67.jpg" , and the path of the second image is src="./img/no_photo.jpg"

how to make it so that used webpack could convert paths from variables into working ones

    1 answer 1

    Try using require: path: require('./img/no_photo.jpg')

    • ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/comp/ShowListItem.vue Module not found: Error: Can't resolve './img/no_photo.jpg' in 'C: \ Users \ dimka \ Desktop \ vue \ learn_router \ src \ comp' @ ./~/babel-loader/lib!./~/vue-loader/lib/ selector.js? type = script & index = 0! ./ src / comp / ShowListItem.vue 30: 21-50 @ ./src/comp/ShowListItem.vue @ ./~/babel-loader/lib!./~/vue -loader / lib / selector.js? type = script & index = 0! ./ src / comp / ShowsList.vue @ ./src/comp/ShowsList.vue @ ./src/router/index.js @ ./src/main .js @ multi ./build/dev-client ./src/main.js - Dmitriy Rudnik
    • maybe he just does not find it. Check that you have the path to the image relative to the file in which the path is correctly specified. Or provide a screenshot of the project structure. - Eugene Kulakov
    • github.com/rudnik275/vue-js-learning/blob/… - Dmitriy Rudnik
    • here so try: noPhoto: require ('./../../ img / no_photo.jpg') - Eugene Kulakov
    • one
      attempt # 2: noPhoto: require ('./../ img / no_photo.jpg') - Eugene Kulakov