Vue project implements src dynamic assignment of img

src dynamic assignment of vue project img

I didn't expect that this broken thing would be so troublesome.

Time is tight, long story short.

Generally, this dynamic assignment requires the use of require.

Moreover, in this requirement, there can only be one variable, multiple variables, operations, and methods, but it cannot be done.

1. No

<img
  :src="require(`@/${ + }`)"
  :alt=""
/>

2. No

<img
  :src="require(getPath(photo))"
  :alt=""
/>       

3. Yes

<img
  :src="require(`@/modules/assets/images/home/temp/${}`)"
  :alt=""
/>

Vue dynamically binds the src attribute of img

Method: Add require before the string URL

Specific steps

In the img tag

<img :src="" alt="">

I need to use require in the imgUrl attribute

<img :src="" alt="">

items:[
    {
        imgUrl: require("./")
    },
    {
        imgUrl: require("./")
    }    
]

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.