0

In @vue/cli 4.0.5 app I set some app settings in app.settings.js file, including task image:

export const settingsTaskImg = '/images/task.jpg'

which would be used in many parts on the app.

But the problem is that when I try to use this setting value in my component it fails, like :

<template>

    <div class="page_content_container item_container">
        taskImg:{{ taskImg }}
        <img alt="Vue logo" src="../../assets/images/task.jpg">
/* the image above is rendered ok */


/* the image above is NOT rendered */
        <img class="pull-left m-3 single_hostel_image_left_aligned" :src="'../../assets'+taskImg" alt="Task Image"/>

in the console of my browser I see : https://i.stack.imgur.com/Gbfzc.jpg image with path using settings value is not rendered.

Which is valid way ?

Updated # 2 : In my prinrscreen I see that valid image has path like

/img/task.0e7d942e.jpg

I do not have any /img/ in my app, it looks like some temporary dir and image I try to bind is not rendered in this subdirectory... Have I to call some vuejs method to render it to this path ?

Thanks!

Petro Gromovo
  • 1,755
  • 5
  • 33
  • 91
  • 1
    Does this answer your question? [Vue.js dynamic images not working](https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) – najuste Nov 26 '19 at 07:55
  • Interesting link. But how require.context works here? I do not see how it can be implemented in my case. I mean an unswer which is decision. – Petro Gromovo Nov 28 '19 at 12:27

1 Answers1

1

In Vue any attribute if wanted to be changed programatically or dynamically as they call, can be binded with v-bind. Such binding will enable to use defined data variables, just like your taskImg.

Here's an example on VueMastery https://www.vuemastery.com/courses/intro-to-vue-js/attribute-binding/ on how image src is being binded. Hope that explains and you'll be able to make it work from here.

najuste
  • 234
  • 3
  • 15
  • That does not look like issue. In the provided link I see Syntax is v-bind: or : for short. Please, look at Updated # 2: – Petro Gromovo Nov 25 '19 at 07:07
  • Sorry, I could not see those double dots somehow.. Yes, the shorthand syntax should be enough. So the issue might be in how you construct the path `'../../assets'+taskImg`, you should bind those together to enclose with double qoutes as src requires.. So it is best the taskImg comes as var, like that: "`../assets/${taskImg}`" – najuste Nov 26 '19 at 07:54
  • 1
    Oh, just found a similar question. So will mark as duplicate https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working – najuste Nov 26 '19 at 07:55
  • How do you think which of proposed answers is valid ? – Petro Gromovo Nov 28 '19 at 12:32
  • 1
    Sorry, I though my comment explains. Use back-tickts for string interpolation and those will let you use double quotes within just like my comment above: \`"../assets/${taskImg}"\` – najuste Dec 03 '19 at 15:55
  • I try to follow it and failed. 1) Is valid path for image /vtasks/src/assets/images/task.jpg? Under /src/ directory? 2) Are there some online fiddle with valid vue/cli 4 project I could modify to make my project? – Petro Gromovo Dec 04 '19 at 08:24
  • If to put image under /public/ directory, the code in link works ok Looks like /public/ is proper place for all images? Not “/src/” ? What confused me in example that it use “/assets/” directory for image? But that must be “public/assets/” ? – Petro Gromovo Dec 05 '19 at 14:58