質問編集履歴

1 エラー追加

naoya.n

naoya.n score 26

2019/04/09 13:35  投稿

require内の一部分に変数を挿入できない
nuxt.jsでのSPAを作っているんですが、imgタグのsrcをbindして動的に切り替えたいんですがrequire('~/assets/im/****.svg')内の「****」部分を変数にして切り替えたいんですが、読み込まれません。
```vue.js
<template>
<div>
 <img :src="imageSrc">
</div>
</template>
<script>
export default{
 data(){
   return{
     imageSrc: require("~/assets/img/default.svg")
   }
 },
 methods: {
   doSomething(data){
       var self = this;
       self.imageSrc = require(\'"~/assets/img/" + data + ".svg"\');
   }
 }
}
</script>
```
上のdoSomething(data)内のdata部分だけを引数から代入したいのですがSyntaxErrorで読み込めません。
どのように書けばrequire('')の中でもうまく書けるでしょうか。
どのように書けばrequire('')の中でもうまく書けるでしょうか。
#追記
self.imageSrc = "require('~/assets/img/"+data.data[0].brand+".svg')";
とした時のエラーです
```
GET http://localhost:3000/require('~/assets/img/sample.svg') 404 (Not Found)
```
  • JavaScript

    38094 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Markdown

    181 questions

    Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

  • Vue.js

    4651 questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

  • Nuxt.js

    1253 questions

    Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る