VueJs - put string inside of a img src attribute

Question

I need to take a piece of data (specifically, the name of a job department) for a vue component, convert it to lowercase and append it into an image src to render the correct image. Because the images are simply just the names of the department.

Currently it looks like this:

<ul class="jobs-container">
  <li
      v-for="job in filteredJobs"
      :key="job.absolute_url"
      class="u-margin-bottom-small">
    <a :href="job.absolute_url" target="_blank">
      <img src="/wp-content/themes/theme/dist/images/icons/careers/engineering.svg" alt="Engineering" />
      <div>
        <h3 v-html="job.departments[0].name" />
        <span class="position" v-html="job.title" />
      </div>
      <span class="location" v-html="job.offices[0].location" />
    </a>
  </li>
</ul>

I need to do something like this:

<ul class="jobs-container">
  <li
      v-for="job in filteredJobs"
      :key="job.absolute_url"
      class="u-margin-bottom-small">
    <a :href="job.absolute_url" target="_blank">

      // insert name of job department
      <img src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />

      <div>
        <h3 v-html="job.departments[0].name" />
        <span class="position" v-html="job.title" />
      </div>
      <span class="location" v-html="job.offices[0].location" />
    </a>
  </li>
</ul>

This doesn't work and throws:

ERROR Failed to compile with 1 errors 4:02:34 PM

error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=bf690b58&

Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

src="/wp-content/themes/theme/dist/images/icons/caree rs/{{ job.departments[0].name }}.svg": Interpolation in side attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |

So then I go:

<img :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />

Error:

ERROR Failed to compile with 1 errors 4:06:01 PM

error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=16c0d4b0&

Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)

Errors compiling template:

invalid expression: Invalid regular expression flags in
/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg
Raw expression: :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg"

30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |

@ ./wp-content/themes/theme/assets/js/Careers.vue?vue&type=template&id=16c0d4b0& 1:0-223 1:0-223 @ ./wp-content/themes/theme/assets/js/Careers.vue @ ./wp-content/themes/theme/assets/js/careers.js @ ./wp-content/themes/theme/assets/js/main.js @ multi ./wp-content/themes/theme/assets/js/main.js ./wp-content/themes/theme/assets/sass/base.scss

In the context of Vue how can I take job.departments[0].name.toLowerCase() and inject into the last part of <img src="/wp-content/themes/theme/dist/images/icons/careers/(INJECT IT HERE).svg" alt="Engineering" />

score 3 · Answer 1 · answered Oct 29 '19 at 20:16

3

Use template literals:

  <img :src="`/url/${name}.svg`" alt="Engineering" />

answered Oct 29 '19 at 20:16

Edin Omeragic

1,948
1
23
26

score 2 · Accepted Answer · answered Oct 29 '19 at 20:15

Close, when you use the binding syntax, you need to wrap your actual URL in single quotes so it interps it as a string:

<img :src="'/wp-content/themes/theme/dist/images/icons/careers/' + job.departments[0].name.toLowerCase() + '.svg" alt="Engineering'" />

Or just throw the entire URL into a variable:

let someScopedVariable = '/wp-content/themes/theme/dist/images/icons/careers/' + job.departments[0].name.toLowerCase() + '.svg';

<img :src="someScopedVariable" />

DUH jfc should've tried that, thank you! – kawnah Oct 29 '19 at 20:16 — kawnah, Oct 29 '19 at 20:16

score 1 · Answer 3 · answered Oct 29 '19 at 20:15

Any literal text must be escaped with ' if you use the colon shorthand since Vue interprets it as JavaScript. See this question for more information. The reason you're seeing the "Invalid regular expression flags" is because JavaScript interprets any text inside /es as a regular expression. E.G.:

:src="'/wp-content/themes/theme/dist/images/icons/careers/' + job.departments[0].name + '.svg'"

VueJs - put string inside of a img src attribute

3 Answers3