IssueRaiser

g-images with dynamic paths not correctly generating full feature set

### Summary We have some components that we want to load images in. I've tried many variations on making this work, and in most cases, gridsome simply outputs the literal property path without actually transforming it. Using `require()` will correctly output the path, but then it doesn't output an actual `g-image` feature, just a generic unhashed `img` tag. I'm quite surprised at this as I can't imagine the tool would be very useful without dynamic images in components. There is an [existing bug for this](https://github.com/gridsome/gridsome/issues/137) with a proposed solution, however as you'll see below, the proposed solution is actually not working. ### Example code ```vue <template> <div> <!-- ... some other html ... --> <!-- FAIL: with computed, it outputs the literal imagePath, broken image --> <g-image :src="imagePath" /> <!-- FAIL: with direct prop, it outputs the literal prop, broken image --> <g-image :src="imageSrc" /> <!-- FAIL: kind of works, but just directly outputs the direct image tag without any g-image features --> <g-image :src="webpackImagePath" /> <!-- FAIL: works, but it's not dynamic! --> <g-image src="@/assets/images/literal-image-path.png" /> </div> </template> <script> export default { props: { imageSrc: { type: String, required: true } }, computed: { imagePath () { return `@/assets/images/${this.imageSrc}` }, webpackImagePath () { return require(`@/ass

Posted by bbugh on Mar 18, 2019, 2:38 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,000 issues0 comments

reliability (Software)

g-images with dynamic paths not correctly generating full feature set

bbughMar 18, 2019, 2:38 PM

### Summary We have some components that we want to load images in. I've tried many variations on making this work, and in most cases, gridsome simply outputs the literal property path without actually transforming it. Using `require()` will correctly output the path, but then it doesn't output an actual `g-image` feature, just a generic unhashed `img` tag. I'm quite surprised at this as I can't imagine the tool would be very useful without dynamic images in components. There is an [existing bug for this](https://github.com/gridsome/gridsome/issues/137) with a proposed solution, however as you'll see below, the proposed solution is actually not working. ### Example code ```vue <template> <div> <!-- ... some other html ... --> <!-- FAIL: with computed, it outputs the literal imagePath, broken image --> <g-image :src="imagePath" /> <!-- FAIL: with direct prop, it outputs the literal prop, broken image --> <g-image :src="imageSrc" /> <!-- FAIL: kind of works, but just directly outputs the direct image tag without any g-image features --> <g-image :src="webpackImagePath" /> <!-- FAIL: works, but it's not dynamic! --> <g-image src="@/assets/images/literal-image-path.png" /> </div> </template> <script> export default { props: { imageSrc: { type: String, required: true } }, computed: { imagePath () { return `@/assets/images/${this.imageSrc}` }, webpackImagePath () { return require(`@/ass

Comments (0)

No comments yet. Start the discussion.

Comment on this issue